使用jQuery实现瀑布流
其实只是用到了jQuery的部分方法啦。。。逻辑部分还是使用js写的，没用jQuery的$.each()方法。
上代码：
HTML（结构）代码
<!DOCTYPE html>
<html>
<head>
<title>瀑布流demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/waterfall.css">
</head>
<body>
<div class="waterfall" id="waterfall">
<div class="item">
<img src="./img/1.jpg" alt="图片1">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/2.jpg" alt="图片2">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/3.jpg" alt="图片3">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/4.jpg" alt="图片4">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/5.jpg" alt="图片5">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/6.jpg" alt="图片6">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/7.jpg" alt="图片7">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/8.jpg" alt="图片8">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/9.jpg" alt="图片9">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/10.jpg" alt="图片10">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/11.jpg" alt="图片11">
<a href="">点击进入</a>
</div>
<div class="item">
<img src="./img/12.jpg" alt="图片12">
<a href="">点击进入</a>
</div>
<div class="clear" id="clear"></div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="./js/waterfall.jquery.js"></script>
</body>
</html>
CSS（表现）代码
*{margin: 0;padding: 0;}
body{background-color: #CCC;}
.waterfall{
width: auto; //宽设置为自动，后面使用js设置宽度
height: auto;
margin: 0 auto;
position: relative;
}
.waterfall .item{
float: left;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #FFF;
}
.waterfall .item img{
width: 100%;
}
.waterfall .item a{
text-decoration: none;
display: block;
}
data.json模拟数据的内容
[
{"src":"10.jpg","alt":"图片10"},
{"src":"11.jpg","alt":"图片11"},
{"src":"12.jpg","alt":"图片12"},
{"src":"1.jpg","alt":"图片1"},
{"src":"2.jpg","alt":"图片2"},
{"src":"3.jpg","alt":"图片3"},
{"src":"6.jpg","alt":"图片6"},
{"src":"7.jpg","alt":"图片7"},
{"src":"8.jpg","alt":"图片8"},
{"src":"9.jpg","alt":"图片9"},
{"src":"10.jpg","alt":"图片10"},
{"src":"11.jpg","alt":"图片11"}
]
JS（行为）代码
/*瀑布流jQuery代码*/
$(function(){
setWaterfall();
//设置瀑布流
function setWaterfall(){
var waterfall = $('#waterfall'); //瀑布流的容器
var boxs = waterfall.children('div.item'); //容器中的盒子
var boxWidth = boxs.eq(0).outerWidth(true); // 盒子宽度
var colsHeight = []; //每一列的宽度 Array
//1.初始化
initWaterfall(waterfall,boxs,boxWidth,colsHeight);
//2.给滚动条设置监听
$(document).scroll(function(){
if(listenScroll(colsHeight)){
appendBox(waterfall,colsHeight,boxWidth);
}
return false;
});
}
//文档瀑布流初始化
function initWaterfall(waterfall,boxs,boxWidth,colsHeight){
//1.获取屏幕可以显示的列数
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth/boxWidth);
//2.设置瀑布流容器宽度
waterfall.width(colsNumber*boxWidth);
//3.初始化现有的文档
for(var i=0;i<boxs.length;++i){
var box = boxs.eq(i);
if(i<colsNumber){ //前colsNumber-1个盒子的高度插入数组
colsHeight[i] = box.outerHeight(true);
}else{ //将colsNumber-1个后的盒子高度以此插入最低高度的数组
colMinHeight = Math.min.apply(null,colsHeight);
colMinHeightIndex = getMinIndex(colsHeight,colMinHeight);
//设置盒子的位置
box.css({
position: 'absolute',
top: colMinHeight,
left: colMinHeightIndex*boxWidth,
});
//将当前盒子高度和数组中最小值相加
colsHeight[colMinHeightIndex] += box.outerHeight(true);
}
}
}
//获取列高度最小的索引
function getMinIndex(colsHeight,colMinHeight){
for(index in colsHeight){
if(colsHeight[index] == colMinHeight){
return index;
}
}
}
//监听滚动条，判读是否需要追加盒子
function listenScroll(colsHeight){
colMaxHeight = Math.max.apply(null,colsHeight);
documentHeight = $(window).height();
scrollHeight = $(window).scrollTop();
return colMaxHeight <= documentHeight+scrollHeight?true:false;
}
//追加盒子
function appendBox(waterfall,colsHeight,boxWidth){
$.ajax({
method :'POST',
url : './data.json',
datatype : 'json',
success: function(result){
var newBoxIndex = waterfall.children('div.item').length;
for(i in result){
var innerString = '<div class="item">'+
'<img src="./img/'+result[i].src+'" alt="'+result[i].alt+'">'+
'<a href="">点击进入</a>'+
'</div>';
waterfall.append(innerString);
}
setBoxCss(waterfall,newBoxIndex,boxWidth,colsHeight);
},
})
}
//设置盒子瀑布流样式
function setBoxCss(waterfall,newBoxIndex,boxWidth,colsHeight){
var newBoxs = waterfall.children('div.item').slice(newBoxIndex);
for(var i=0;i<newBoxs.length;++i){
var box = newBoxs.eq(i);
//将colsNumber-1个后的盒子高度以此插入最低高度的数组
colMinHeight = Math.min.apply(null,colsHeight);
colMinHeightIndex = getMinIndex(colsHeight,colMinHeight);
//盒子定位
box.css({
position: 'absolute',
top: colMinHeight,
left: colMinHeightIndex*boxWidth,
});
//将当前盒子高度和数组中最小值相加
colsHeight[colMinHeightIndex] += box.outerHeight(true);
}
}
});