jquery实现瀑布流布局
2018-07-20 来源：open-open
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div>
<div><img src="imgs/1.jpg" alt=""/></div>
<div><img src="imgs/2.jpg" alt=""/></div>
<div><img src="imgs/3.jpg" alt=""/></div>
<div><img src="imgs/4.jpg" alt=""/></div>
<div><img src="imgs/5.jpg" alt=""/></div>
<div><img src="imgs/6.jpg" alt=""/></div>
<div><img src="imgs/7.jpg" alt=""/></div>
<div><img src="imgs/8.jpg" alt=""/></div>
<div><img src="imgs/9.jpg" alt=""/></div>
<div><img src="imgs/10.jpg" alt=""/></div>
<div><img src="imgs/11.jpg" alt=""/></div>
<div><img src="imgs/12.jpg" alt=""/></div>
<div><img src="imgs/13.jpg" alt=""/></div>
<div><img src="imgs/14.jpg" alt=""/></div>
<div><img src="imgs/15.jpg" alt=""/></div>
<div><img src="imgs/16.jpg" alt=""/></div>
<div><img src="imgs/17.jpg" alt=""/></div>
<div><img src="imgs/18.jpg" alt=""/></div>
<div><img src="imgs/19.jpg" alt=""/></div>
<div><img src="imgs/20.jpg" alt=""/></div>
<div><img src="imgs/21.jpg" alt=""/></div>
<div><img src="imgs/22.jpg" alt=""/></div>
<div><img src="imgs/23.jpg" alt=""/></div>
<div><img src="imgs/24.jpg" alt=""/></div>
<div><img src="imgs/25.jpg" alt=""/></div>
<div><img src="imgs/26.jpg" alt=""/></div>
<div><img src="imgs/27.jpg" alt=""/></div>
<div><img src="imgs/28.jpg" alt=""/></div>
</div>
</body>
</html>
css：
*{
margin: 0;
padding: 0;
}
.walterfull{
position: relative;
}
.box{
float: left;
padding: 10px;
border: 1px solid #ccc;
margin: 15px 0 0 15px;
box-shadow: 0 0 5px pink;
}
img{
width: 180px;
}
js：
/**
* Created by ll0u on 1/7/2015.
*/
$(window).load(function(){
walterFall();
$(window).on('scroll', function(){
if(checkLoad()){
var boxList = $('.walterfull>.box');
$.each(data.imgs, function(index, value){
var oBox = $('<div>').addClass('box').appendTo($('.walterfull'));
var oImg = $('<img>').attr('src', value.url).appendTo(oBox);
minH = Math.min.apply(null, colH);
minHIndex = $.inArray(minH, colH);
console.log(minH)
console.log(boxList.eq(minHIndex).position().left)
oBox.css({
position: 'absolute',
top: minH,
left: boxList.eq(minHIndex).position().left
})
colH[minHIndex] += oBox.outerHeight(true);
})
}else{
}
})
})
var data = {imgs:
[
{url: 'imgs/28.jpg'},
{url: 'imgs/29.jpg'},
{url: 'imgs/30.jpg'},
{url: 'imgs/31.jpg'},
{url: 'imgs/32.jpg'}
]
}
var colH = []; //存放每一列的高度
var minH = 0; //存放最小高度
function walterFall(){
var oParent = $('.walterfull');
var boxList = $('.walterfull>.box');
var screenW = $(window).width();
var screenH = $(window).height();
var boxW = boxList.eq(0).outerWidth(true);
var columns = Math.floor(screenW/boxW);
var minHIndex = 0; //存放最小高度的列
oParent.css({
width: columns * boxW + parseInt($(boxList[0]).css('marginLeft')),
margin: '0 auto'
})
boxList.each(function(index, dom){
if(index < columns){
colH.push($(dom).outerHeight(true));
}else{
minH = Math.min.apply(null, colH);
minHIndex = $.inArray(minH, colH);
$(dom).css({
position: 'absolute',
top: minH,
left: boxList.eq(minHIndex).position().left
})
colH[minHIndex] += $(dom).outerHeight(true);
}
})
}
function checkLoad(){
var lastBox = $('.walterfull>.box').last();
var disT = lastBox.offset().top + Math.floor(lastBox.outerHeight(true)/2);
var screenT = $(window).height() + $(window).scrollTop();
return disT<screenT ? true : false;
}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐