jQuery实现瀑布流
瀑布流布局多用于加载图片，或者图片配上文字。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，还会不断加载数据块并附加至当前尾部。本文就来利用jQuery实现一个图片瀑布流的效果。
1.布局。
首先我们创建一个项目，导入jquery.js，以及十张图片。图片大小可以不一致。
先放入一个容器div（container）。然后创建一个div（box）用来承载图片及其他边缘效果，比如文字介绍等。在这个div里面再指定一个div（content）用来承载图片。
代码如下：
<div id="container"> <div class="box"> <div class="content"> <img src="img/1.jpg"> </div> </div> <div class="box"> <div class="content"> <img src="img/2.jpg"> </div> </div> ... <div class="box"> <div class="content"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="content"> <img src="img/0.jpg"> </div> </div> </div>
这时候图片是依次向下排列的，我们来加一个样式。首先通配符设置margin和padding都是0。然后box设置相对定位和向左浮动，这样图片就一张张挨在一起了。为了好看我们再给content加上一个边框。img固定一个宽度，高度设为auto。代码：
* { margin: 0; padding: 0; } .box { position: relative; float: left; } .content { padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .content img { width: 200px; height: auto; }
为了效果明显，我们将图片div多复制几个。至此布局基本上完成了，我们可以看到此时大致的样式出来了，但是图片上下排列还不够紧密。下面要修改图片的位置摆放。
2.图片位置摆放
根据瀑布流效果可以看出，第二排的第一张图片应该放在第一排最短的一张图片下面，之后也是依次按照这个规则摆放。下面我们用jQuery实现：
$(document).ready(function(){//加载文档 $(window).on("load",function(){//监听window的加载事件 imgLocation(); }); }); function imgLocation(){//确定图片加载的位置 var box = $(".box");//创建盒子对象 var boxWidth = box.eq(0).width();//获取盒子宽度 var num = Math.floor($(window).width()/boxWidth);//计算一排可以摆放几个 var boxArr = [];//获取这一排盒子的高度，好找到最短的一个 box.each(function(index,value){//each遍历 //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 });//下一张图片摆放在最短图片的下面 boxArr[minboxIndex]+=box.eq(index).height();//重新计算最短图片的高度 } }); }
此时已经实现了瀑布流的效果。
3.滚动加载实现
首先要监听鼠标滚动事件。当最后一张图片滚动到一半的时候，创建对象，加载图片。
代码如下：
$(document).ready(function(){//加载文档 $(window).on("load",function(){//监听window的加载事件 imgLocation(); var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]} window.onscroll = function(){ if(scrollside()){ $.each(dataImg.data,function(index,value){ //jQuery动态创建div和img var box = $("<div>").addClass("box").appendTo($("#container"));//创建一个div，添加class，加载到容器中 var content = $("<div>").addClass("content").appendTo(box);//创建内容div加载到box中 $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);//创建图片加载到内容中 imgLocation();//新加入的图片遵循瀑布流布局的规则 }); } } }); }); function scrollside(){ var box = $(".box"); var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);//最后一张图片距离顶端的距离加上最后一张图片高度的一半 var documentHeight = $(document).height();//当前容器的高度 var scrollHeight = $(window).scrollTop();//鼠标滚动的高度 return (lastboxHeight<scrollHeight+documentHeight)?true:false; }
4.bug修复。
上面的代码在窗口大小不断变化时会出现bug，列数不随窗口大小改变。修复这个bug我们可以在window的加载事件监听的地方加上一个监听窗口大小变化的函数，当窗口大小改变时调用一遍布局函数imgLocation();
这样窗口拉小已经可以跟着改变，但是重新拉大列数不会跟着增加，而是叠加在已有列上。这是因为拉大以后余出的空间没有box，获取到的box的left是原有列的，所以新图片会叠加在前面的列上。所以我们在if(index<num)时重新赋一遍位置。
如下黄色底色部分就是修改的代码。 最终js代码如下：
$(document).ready(function() { //加载文档 $(window).on("load", function() { //监听window的加载事件 imgLocation(); var dataImg = { "data": [{ "src": "0.jpg" }, { "src": "9.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" }, { "src": "6.jpg" }, { "src": "7.jpg" }] } /*鼠标滚动时：*/ window.onscroll = function() { if (scrollside()) { $.each(dataImg.data, function(index, value) { //jQuery动态创建div和img var box = $("<div>").addClass("box").appendTo($("#container")); //创建一个div，添加class，加载到容器中 var content = $("<div>").addClass("content").appendTo(box); //创建内容div加载到box中 $("<img>").attr("src", "./img/" + $(value).attr("src")).appendTo(content); //创建图片加载到内容中 imgLocation(); //新加入的图片遵循瀑布流布局的规则 }); } } /*窗口大小变化时：*/ window.onresize = function() { imgLocation(); } }); }); /*动态加载*/ function scrollside() { var box = $(".box"); var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2); //最后一张图片距离顶端的距离加上最后一张图片高度的一半 var documentHeight = $(document).height(); //当前容器的高度 var scrollHeight = $(window).scrollTop(); //鼠标滚动的高度 return (lastboxHeight < scrollHeight + documentHeight) ? true : false; } /*瀑布流布局实现*/ function imgLocation() { //确定图片加载的位置 var box = $(".box"); //创建盒子对象 var boxWidth = box.eq(0).width(); //获取盒子宽度 var num = Math.floor($(window).width() / boxWidth); //计算一排可以摆放几个 var boxArr = []; //获取这一排盒子的高度，好找到最短的一个 box.each(function(index, value) { //each遍历 //index是图片位置，value是相对应的元素。 var boxHeight = box.eq(index).height(); if (index < num) { boxArr[index] = boxHeight; /*重新设置第一行的元素位置，避免窗口由小拉大时出错：*/ $(value).css({ "position": "absolute", "top": 0, "left": boxWidth * index }); } else { var minboxHeight = Math.min.apply(null, boxArr); //获取最小高度 //console.log(minboxHeight); var minboxIndex = $.inArray(minboxHeight, boxArr); //获取最小高度图片的位置 // console.log("minboxIndex:"+minboxIndex); $(value).css({ "position": "absolute", "top": minboxHeight, "left": box.eq(minboxIndex).position().left }); //下一张图片摆放在最短图片的下面 boxArr[minboxIndex] += box.eq(index).height(); //重新计算最短图片的高度 } }); }
以上。
