下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!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',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;
}
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。