jQuery实现瀑布流布局

　　<div id="main">

　　<div class="box">

　　<div class="pic">

　　<img src="images/0.jpg" alt="">

　　</div>

　　</div>

　　<div class="box">

　　<div class="pic">

　　<img src="images/1.jpg" alt="">

　　</div>

　　</div>

　　<div class="box">

　　<div class="pic">

　　<img src="images/2.jpg" alt="">

　　</div>

　　</div>

　　<div class="box">

　　<div class="pic">

　　<img src="images/3.jpg" alt="">

　　</div>

　　</div>

　　<div class="box">

　　<div class="pic">

　　<img src="images/4.jpg" alt="">

　　</div>

　　</div>

　　<div class="box">

　　<div class="pic">

　　<img src="images/2.jpg" alt="">

　　</div>

　　</div>

　　</div>

　　* {

　　margin: 0;

　　padding: 0;

　　}

　　#main {

　　position: relative;

　　}

　　.box {

　　padding:15px 0 0 15px;

　　float:left;

　　}

　　.pic {

　　padding: 10px;

　　border: 1px solid #ccc;

　　border-radius: 5px;

　　box-shadow: 0px 0px 5px #ccc;

　　img {

　　width:165px;

　　height:auto;

　　}

　　}

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

　　waterfall();

　　var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

　　//模拟json数据;

　　$(window).on("scroll",function () {

　　if(checkScrollSlide){

　　$.each(dataInt.data,function (key,value) {

　　var oBox=$("<div>").addClass("box").appendTo($("#main"));

　　//jQuery支持连缀,隐式迭代;

　　var oPic=$("<div>").addClass('pic').appendTo($(oBox));

　　$("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);

　　});

　　waterfall();

　　}

　　})

　　});

　　//流式布局主函数;

　　function waterfall () {

　　var $boxs=$("#main>div");

　　//获取#main元素下的直接子元素div.box;

　　//获取每一列的宽度;

　　var w=$boxs.eq(0).outerWidth();

　　//outerWidth()获取包含padding和border在内的宽度;

　　//var w=$boxs.eq(0).width();

　　//width()只能获取给元素定义的宽度;

　　var cols=Math.floor($(window).width()/w);

　　//获取多少列;

　　$("#main").width(w*cols).css("margin","0 auto");

　　//设置#main元素的宽度和居中样式;

　　var hArr=[];

　　//每一列高度的集合;

　　$boxs.each(function (index,value) {

　　//遍历每一个box元素;

　　//为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;

　　var h=$boxs.eq(index).outerHeight();

　　//每一个box元素的高,

　　if (index<cols) {

　　hArr[index]=h;

　　//确定每列第一个元素的高度;

　　} else{

　　var minH=Math.min.apply(null,hArr);

　　//得出列高数组中的最小高度;

　　var minHIndex=$.inArray(minH,hArr);

　　//$.inArray()方法得出元素(minH)在数组(hArr)中的index值;

　　//console.log(value);

　　//此时的value是第一行之后的所有的box元素的DOM对象!;

　　$(value).css({

　　//$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;

　　"position":"absolute",

　　"top":minH+"px",

　　"left":minHIndex*w+"px"

　　});

　　hArr[minHIndex]+=$boxs.eq(index).outerHeight();

　　//最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;

　　};

　　});

　　// console.log(hArr);

　　};

　　function checkScrollSlide () {

　　var $lastBox=$("#main>div").last();

　　var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);

　　var scrollTop=$(window).scrollTop();

　　var documentH=$(window).height();

　　return (lastBoxDis<scrollTop+documentH)?true:false;

　　}