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(); } });}

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