首页 > 代码库 > js瀑布流（定位法）
js瀑布流（定位法）
1、首先，自己写好图片路径，引入jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
position: relative;
width: 860px;
margin: 0 auto;
}
li{
width: 200px;
position: absolute;
list-style: none;
}
img{
width: 100%;
border-radius: 8px;
}
</style>
</head>
<body>
<ul>
<li><img src="http://www.mamicode.com/img/1.jpg"/></li>
<li><img src="http://www.mamicode.com/img/2.jpg"/></li>
<li><img src="http://www.mamicode.com/img/3.jpg"/></li>
<li><img src="http://www.mamicode.com/img/4.jpg"/></li>
<li><img src="http://www.mamicode.com/img/5.jpg"/></li>
<li><img src="http://www.mamicode.com/img/6.jpg"/></li>
<li><img src="http://www.mamicode.com/img/7.jpg"/></li>
<li><img src="http://www.mamicode.com/img/8.jpg"/></li>
<li><img src="http://www.mamicode.com/img/9.jpg"/></li>
<li><img src="http://www.mamicode.com/img/10.jpg"/></li>
<li><img src="http://www.mamicode.com/img/11.jpg"/></li>
<li><img src="http://www.mamicode.com/img/12.jpg"/></li>
<li><img src="http://www.mamicode.com/img/13.jpg"/></li>
<li><img src="http://www.mamicode.com/img/14.jpg"/></li>
<li><img src="http://www.mamicode.com/img/15.jpg"/></li>
<li><img src="http://www.mamicode.com/img/16.jpg"/></li>
<li><img src="http://www.mamicode.com/img/17.jpg"/></li>
<li><img src="http://www.mamicode.com/img/18.jpg"/></li>
<li><img src="http://www.mamicode.com/img/19.jpg"/></li>
<li><img src="http://www.mamicode.com/img/20.jpg"/></li>
<li><img src="http://www.mamicode.com/img/21.jpg"/></li>
<li><img src="http://www.mamicode.com/img/22.jpg"/></li>
<li><img src="http://www.mamicode.com/img/23.jpg"/></li>
<li><img src="http://www.mamicode.com/img/24.jpg"/></li>
</ul>
</body>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
lazyLoad("ul","li",4,20,20).init();
/*
wrap:外层的dom
box:瀑布流的dom
clonum:列数
marginLeft：每列，间隔
marginBottom：每行的间隔
* */
function lazyLoad(wrap,box,clonum,marginLeft,marginBottom){
var posArr = [];
var boxList = $(wrap).find(box),
boxWidth = boxList.width();
console.log(boxWidth);
var fn = {};
fn.init = function(){
for(var i = 0; i <clonum; i++ ){
posArr.push({"top":0,"left":boxWidth*i + marginLeft*i});
}
fn.layout();
};
fn.layout = function(){
var min = 0,
max = 0;
boxList.each(function(index,ele){
min = fn.getHeight().minIndex;
$(ele).css({"top":posArr[min].top,"left":posArr[min].left});
posArr[min].top = posArr[min].top*1 + $(ele).height()*1 + marginBottom;
max = fn.getHeight().maxIndex;
$(wrap).css({"height":posArr[max].top});
});
};
fn.getHeight = function(){
var minHeight = posArr[0].top,
maxHeight = posArr[0].top,
minIndex = 0,
maxIndex = 0;
for(var i = 0; i < posArr.length; i++){
if(minHeight > posArr[i].top){
minHeight = posArr[i].top;
minIndex = i;
}
if(maxHeight < posArr[i].top){
maxHeight = posArr[i].top;
maxIndex = i;
}
}
return {"minIndex":minIndex,"maxIndex":maxIndex};
};
return fn;
}
});
</script>
</html>
js瀑布流（定位法）