jQuery版本的瀑布流

如果说用js来写瀑布流或者其他效果很麻烦，那么jQuery明显就是有了光明大道。

下面来看一下使用jQuery如何完成的

1.HTML代码：
<div id="main">
 <div class="pin">
 <div class="box">
 <img src="images/i1.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i2.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i3.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i4.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i5.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i6.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i7.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i8.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i9.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i10.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i11.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i12.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i13.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i14.jpg">
 </div>
 </div>
 <div class="pin">
 <div class="box">
 <img src="images/i15.jpg">
 </div>
 </div>
</div>

css代码： 
<style>
 *{
 margin: 0;
 padding: 0;
 }

 #main{
 position: relative;
 }

 .pin{
 padding: 15px 0 0 15px;
 float: left;
 }

 .box{
 padding: 5px;
 border: 1px solid #ccc;
 box-shadow: 0 0 6px #ccc;
 border-radius: 5px;
 }

 .box img{
 width: 236px;
 height: auto;
 }

 </style>

js代码：
/**
 * Created by iwen on 2015/12/24.
 */


$(document).ready(function () {
 $(window).on("load", function () { //ͼƬûÓмÓÔسöÀ´
 imgLocation();

 var dataImg = {"data": [{"src": "i1.jpg"},{"src": "i2.jpg"}]};//json×Ö·û´®
 $(window).scroll(function () {
 if (getSideHeight()) {
 $.each(dataImg.data, function (index,value) {
 var pin = $("<div>").addClass("pin").appendTo("#main");
 var box = $("<div>").addClass("box").appendTo(pin);
 //jQuery.each( collection, callback(indexInArray, valueOfElement))
 var img = $("<img>").attr("src", "images/"+$(value).attr("src")).appendTo(box);
 });
 }
 imgLocation();
 })
 })
});


function getSideHeight() {
 var box = $(".pin");
 var lastImgHeight = box.last().offset().top - Math.floor(box.last().height() / 2);
 //console.log(box.last().get(0).offsetTop);
 var documentHeight = $(document).height();
 var srollHeight = $(window).scrollTop();
 return (lastImgHeight < documentHeight + srollHeight) ? true : false;

}


function imgLocation() {
 var box = $(".pin");
 var boxWidth = box.eq(0).width(); //¹Ì¶¨µÄ
 //»ñÈ¡µÄ¸öÊý
 var num = Math.floor($(window).width() / boxWidth);//·ÀÖ¹³öÏÖСÊ÷
 var numArr = [];
 box.each(function (index, value) {
 console.log(index);
 var boxHeight = box.eq(index).height();
 if (index < num) {//µÚÒ»ÅÅ
 numArr[index] = boxHeight;
 } else {
 //È¡³öµ±Ç°¸ß¶È×îСµÄÄÇÒ»¸ö
 var minboxHeight = Math.min.apply(numArr, numArr);
 //»ñÈ¡Êý×éÖÐ×îСֵµÄϱê
 var minIndex = $.inArray(minboxHeight, numArr);//$.inArray·µ»Øµ±Ç°²éÕÒÔªËصÄϱê
 $(value).css({
 position: "absolute",
 top: minboxHeight,
 left: box.eq(minIndex).position().left
 });
 numArr[minIndex] += box.eq(index).height();
 }
 });
}

注：上面的代码注释会出现乱码，因为直接拷贝的源码，所以，并不会影响执行效果