源码下载地址
wf2.png
实现思路
-
通过容器宽度 和每列的宽度 可以计算出列数。
-
数组来保存每一列的高度，当页面加载新的盒子时，比较每一列的高度，在最小高度的列上动态添加盒子并设置相关属性（绝对定位）
-
当鼠标往下滚动到最后一张图片位置时，动态获取数据加载到瀑布流容器中
js部分
$(function(){
var wfData=null;
function init(){
waterfall.initwf();
waterfall.wfReload();
}
//滚动到最后一张图片时动态加载盒子
$(window).on('scroll',function(){
if(waterfall.isLoad()){
waterfall.dynamicAddBox(8);
waterfall.wfReload();
}
});
//瀑布流
var waterfall={
columnCount:Math.floor($('#waterFall').width() / $("#waterFall .box").eq(0).width()),
boxHeightArr:[],//每列高度集合
wfReload:function(){
//重新加载
console.log('当前盒子个数='+$("#waterFall .box").length);
waterfall.wfLoad($("#waterFall .box"),waterfall.columnCount);
},
//动态添加盒子
dynamicAddBox:function(length){
var tempList=waterfall.getRandomList(length,wfData.wfList);
$.each(tempList,function(index,item){
$('<div class="box">'+
'<div class="pic">'+
''+
'<div class="evaluate">'+
'<p class="customer">'+item.user+'</p>'+
'<p class="desc">'+item.desc+'</p>'+
'</div>'+
'</div>'+
'</div>').appendTo($('#waterFall'));
});
},
//动态定位
wfLoad:function(boxList,columnCount){
boxList.each(function(index, item) {
if (index < columnCount) {
//首行每列高度直接加入数组
waterfall.boxHeightArr[index] = boxList.eq(index).height();
} else {
//数组boxHeightArr中的最小值
var minHeight = Math.min.apply(null, waterfall.boxHeightArr);
var minHeightIndex = $.inArray(minHeight, waterfall.boxHeightArr);
$(item).css({
'position': 'absolute',
'top': minHeight+10,
'left': boxList.eq(minHeightIndex).position().left
});
//数组 更新添加了box后的列高 元素原来高度+新增元素高度
waterfall.boxHeightArr[minHeightIndex] += boxList.eq(index).height()+10;
}
});
},
initwf:function(){
$.ajax({
url: "../json/waterfall.json",
type: "GET",
dataType: "json",
charset:"utf-8",
async:false,
success: function(data) {
wfData=data;
}
});
},
//随机选取指定个数 不同的box
getRandomList:function(length,originaArr){
var returnArr=[];
var indexArr=[];
var temp=null;
while(indexArr.length<length){
temp=Math.floor(Math.random()*originaArr.length);
if($.inArray(temp, indexArr)<0){
indexArr.push(temp);
returnArr.push(originaArr[temp]);
}
}
return returnArr;
},
//是否加载盒子
isLoad:function(){
var lastBox=$("#waterFall .box").last();
var flagHeight=lastBox.offset().top+Math.floor(lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return scrollTop+documentH>flagHeight;
}
}
//初始化
init();
});
css部分
.water-fall {width: 1000px;margin: 20px auto 0;position: relative;height: 1170px;}
.water-fall .box {padding: 10px 0 0 10px;float: left;}
.water-fall .box .pic {padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;width: 218px;position: relative;}
.water-fall .box .pic img {width: 218px;height:auto;}
.water-fall .box .pic .evaluate {position: absolute;bottom: 13px;width: 218px;background-color: rgba(13, 135, 84, 0.5);}
.water-fall .box .pic .evaluate .customer {font-size: 14px;color: #fff;margin-left: 10px;}
.water-fall .box .pic .evaluate .desc {font-size: 12px;color: #fff;margin-left: 10px;line-height: 20px;}
html 部分
<section id="waterFall" class="water-fall clearfix">
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">生命注定要经历一次次磨难，才能塑造出与众不同，所有的经历都是获得，所有的获得都是上苍给予的恩宠。</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">你若太害怕，闭上眼就好。</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">如果皮囊难以修复，那就用思想去填满它吧！</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">不知道是哪里走错，路的尽头没有人等我。</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">当我在黑暗中艰难摸索，试图拾起些碎片的时候，却发现这个过程远没有想像中那么简单。</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">我们，结成伴趟过天真。</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer"><strong>胡 歌</strong></p>
<p class="desc">在拥有的时候懂得珍惜，就不会害怕失去；若失去了才知道珍惜，就算不上真正拥有。</p>
</div>
</div>
</div>
<div class="box">
<div class="pic">
<div class="evaluate">
<p class="customer">胡歌</p>
<p class="desc">忍了多久，错过青春。却憎恨，别人奋不顾身。</p>
</div>
</div>
</div>
</section>
网友评论