用jQuery实现瀑布流效果学习笔记

　　jQuery一直没系统的学，只知道是js库，封装了好多js函数，方便了开发。以前做过一个原生的图片网站瀑布流效果，超级麻烦，这次用了jQuery方法，瞬间代码浓缩了，只有56行js代码。神奇的让我来把其中的几个函数具体记录一下。

　　首先，在WebStorm中新建一个工程，导入jquery库和几张img放在img文件夹下，新建html和css文件，用来搭建基本的网页结构。我们设定图片的宽度固定，高度不定，绝对定位，左浮动。这里就不细说了。我们主要讲jquery部分的知识。

　　这里我们讲一下我们要实现的效果，瀑布流效果就是视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据并附加至当前尾部。除第一行元素外，其他的元素要按照之前的排列中高度最低的下面。一次循环。当屏幕滚动的时候，判断加载条件，动态加载。

　　开始吧。

　　（1）HTML文档整体加载，监听window的load事件.

$(document).ready(function(){
    $(window).on("load",function(){

    };
};

　　(2).判断图片的位置。即当图片多于一行时，剩下的图片应该摆放在哪里。

function imgLocation(){
    //用jquery获取所有的box
    var box = $(".box");
    //box的宽度
    var boxWidth = box.eq(0).width();
    //每行共有几个box
    var num = Math.floor($(window).width()/boxWidth);
    //存放box的boxHeight
    var boxArr = [];
    //each方法遍历box，当只有一行的时候记录boxHeight，多于一行则找出minBoxHeight，并设置样式。
    box.each(function(index,value){
        var boxHeight = box.eq(index).height();
        if(index<num){
            boxArr[index] = boxHeight;
        }else{
            var minBoxHeight = Math.min.apply(null,boxArr);
            var minBoxIndex = $.inArray(minBoxHeight,boxArr);
            $(value).css({
                "position":"absolute",
                "top":minBoxHeight,
                "left":box.eq(minBoxIndex).position().left
            });
            //动态变化minBoxIndex
            boxArr[minBoxIndex] += box.eq(index).height();
        }
    });
}

　　(3).监听屏幕的滚动事件。当屏幕的高度大于最后一张图片的高度的1/2时，加载资源。

function scrollside(){
    var box = $(".box");
    var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
    var documentHeight=$(document).width();
    var scrollHeight=$(window).scrollTop();
    return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}

　　(4).监听屏幕的函数写好以后，我们先在load加载事件中本地写一个JSON数据，传递图片资源。

　　　　即：var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};

　　(5).实现window的onscroll事件。当满足(3)中滚动的条件时，我们动态的创建box，然后appendTo相应的父容器中

window.onscroll=function(){
            if(scrollside()){
                //each()方法遍历数据加载进来
                $.each(dataImg.data,function(index,value){
                    var box = $("<div>").addClass("box").appendTo($("#container"));
                    var content = $("<div>").addClass("content").appendTo(box);
                    console.log("./img/"+$(value).attr("src"));
                    $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);
                });
                imgLocation();
            }
        };

　　至此，用jQuery实现照片瀑布流的方法已经实现了。在整个过程中，我主要学到了

• 　　each()方法遍历数组，
• eq()
• 　　Math.min.apply()找出数组中最小数，
• 　　jquery.inarray(value,array) 确定第一个参数在数组中的位置，
• 　　$(value).css用jquery设置css样式，
• 　　动态添加HTML文档节点，并从JSON数据中获取相应的属性。

工程文件放在网盘了，朋友有需要的话可以去下载。jquery实现瀑布流效果。链接: http://pan.baidu.com/s/1dEEmr5n 密码: cjic