您现在的位置是：网站首页 > 心得笔记
jquery实现瀑布流布局
简介瀑布流主要采用的是定位，通过计算位置把这些数据块排列在盒子里的！所以，把所有数据块全放在一个大盒子main里，再把每一个数据块塞到一个小盒子box里，因为每个数据块要设置间隔、圆角、阴影等样式，所以在box盒子里再塞入一个小盒子pic，在小盒子pic里放置图片。
html代码：
<html> <head> <title>瀑布流布局</title> <meta charset="utf-8" /> </head> <body> <!--所有数据块的大盒子--> <div id="main"> <!--每个数据块的小盒子--> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/1.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/2.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/3.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/4.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/5.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/6.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/7.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/8.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/9.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/10.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/11.png" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/12.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/13.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/14.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/15.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/16.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/17.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/18.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/19.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/20.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/21.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/22.jpg" /> </div> </div> <div class="box"> <!--设置每个数据块的样式盒子--> <div class="pic"> <img src="/pbl/img/23.jpg" /> </div> </div> </div> </body> </html>
css代码：
*{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: 0 0 5px #ccc;}
.pic img{width:165px;height:auto;}js代码：
<script src="/admin/js/jquery.min.js?v=2.1.4"></script>
<script>
//页面加载时我们需要执行function脚本
$(window).on('load',function(){
waterfall();
var dataInt = {"data":[{'src':'/pbl/img/1.jpg'},{'src':'/pbl/img/2.jpg'},{'src':'/pbl/img/3.jpg'},{'src':'/pbl/img/4.jpg'},{'src':'/pbl/img/5.jpg'},{'src':'/pbl/img/6.jpg'},{'src':'/pbl/img/7.jpg'},{'src':'/pbl/img/8.jpg'},{'src':'/pbl/img/9.jpg'},{'src':'/pbl/img/10.jpg'},{'src':'/pbl/img/11.png'},{'src':'/pbl/img/12.jpg'},{'src':'/pbl/img/13.jpg'},{'src':'/pbl/img/14.jpg'},{'src':'/pbl/img/15.jpg'},{'src':'/pbl/img/16.jpg'},{'src':'/pbl/img/17.jpg'},{'src':'/pbl/img/18.jpg'},{'src':'/pbl/img/19.jpg'},{'src':'/pbl/img/20.jpg'}]};
$(window).on('scroll',function(){
//检测是否具备加载图片的条件
if (checkScrollSlide()) {
//获取后台数据，渲染到页面上
$.each(dataInt.data,function(index,value){
var oBox = '<div class="box">' +
'<div class="pic">' +
'<img src="'+value.src+'"/>' +
'</div>' +
'</div>';
$("#main").append(oBox);
});
waterfall();//第二次加载是为了把新加载的图片按瀑布流方式重新布局
}
});
});
//完成瀑布流布局
function waterfall(){
//1、将main下面的所有class为box的元素取出来
var oBoxs = $("#main .box");
//2、计算整个页面显示的列数 = 页面宽度/每个box盒子的宽度
var oBoxW = oBoxs.eq(0).outerWidth();//width()只获取你定义的那个宽度 outerWidth() 获取的宽度包括padding border等填充在内的
var cols = Math.floor($(window).width()/oBoxW);//窗口不存在边框和填充，所以使用width() Math.floor()取整
//3、设置main的宽度=每一列的宽*列数和对齐方式（缩放窗口，发现列数还是变化，因为大盒子main没有设置宽度，所以main在随着整个浏览器的变化而变化。所以，设置main的宽度）
$("#main").width(oBoxW*cols).css('margin','0 auto');//设置main宽度
//4、获取第一行高度最小高度值（第一行图片不需要做定位，但第二行的第一张需要排列在第一行最矮图片的下面，紧接着依次排列）
var hArr = [];//存放每一列高度的数组
$(".box").each(function(index, value){//遍历的索引, 遍历的值
var h = $(this).outerHeight();
if (index < cols) {//说明是第一行
hArr.push(h);
} else {
//获取最小高度值和最小高度值所在数组中的索引
var minH = Math.min.apply(null,hArr);
var minHIndex = $.inArray(minH,hArr);
//设置第一行之后的所有图片位置(从第二行开始，所有图片都要加绝对定位，循环过程中，数组中最小值始终是同一个，所以，之后的所有图片都固定在同一个位置重叠了.所以说数组要修改的!每塞进一个数，数组中最小值的高将在原来基础上+塞进的这个高)
$(this).css({'position':'absolute','top':minH+'px','left':minHIndex*oBoxW+'px'});
//改变数组的值
hArr[minHIndex]+=$(this).outerHeight();
}
});
}
//检测是否具备滚动加载图片的条件(以最后一个数据块距离判断.最后一个盒子进来一半时加载图片)
function checkScrollSlide(){
var lastBox = $("#main>div").last();//去最后一个元素
//最后一个盒子和整个页面顶部的距离+最后一个盒子高度的一半
var lastBoxH = lastBox.offset().top+Math.floor(lastBox.outerHeight()/2);
//页面滚走的距离+页面的高度
var scrollTop = $(window).scrollTop();
var height = $(window).height();
return (lastBoxH<scrollTop+height)?true:false;
}
</script>