瀑布流布局
国外：Pinterest
国内：花瓣
1.js方法
2.jq方法
3.css3多栏布局
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="../images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/15.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/16.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/17.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/18.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/19.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/20.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/21.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/22.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/23.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/24.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/25.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/26.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/27.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/28.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/29.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/30.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/31.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/32.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../images/33.jpg" alt="">
</div>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{width: 165px;height: auto}
javascript:script.js
window.onload=function(){
waterfall('main','box');
}
function waterfall(parent,box){
//取出所有main下所有的class为box的元素
var oParent = document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
console.log("oboxs:"+oBoxs.length);
// 计算需要显示的列数(页面宽度/box宽度)
var oBoxWidth = oBoxs[0].offsetWidth;
console.log("oBoxWidth:"+oBoxWidth);
var cols= Math.floor(document.documentElement.clientWidth/oBoxWidth);
console.log("cols:"+cols);
//设置main宽度
oParent.style.cssText='width:'+oBoxWidth*cols+"px;margin:0 auto;";
var hArr=[];//存放每一列高度的数组
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}
else{
var minheight = Math.min.apply(null,hArr);
console.log(minheight);
var index=getMinheightIndex(hArr,minheight);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minheight+"px";
// oBoxs[i].style.left=oBoxWidth*index+"px";
oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
hArr[index]+=oBoxs[i].offsetHeight;
}
}
console.log("oBoxsHeight:"+hArr);
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array(); //存储所有class为box的元素
oElements = parent.getElementsByTagName('*')
for(var i =0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i])
}
}
return boxArr
}
function getMinheightIndex(arr,val){
for (var i in arr)
if (arr[i]==val){
return i;
}
}
jquery:script.js
$(window).on('load',function(){
waterfall();
var dataInt ={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]}
$(window).on('scroll',function(){
if(checkScrollSlide){
$.each(dataInt.data,function(key,value){
console.log(value);
var oBox=$('<div>').addClass('box').appendTo($("#main"));
var oPic=$('<div>').addClass('pic').appendTo($(oBox));
$('<img>').attr('src',"images/"+$(value).attr("src")).appendTo($(oPic));
})
waterfall();
}
})
})
function waterfall(){
var $boxs=$('#main>div');
var percolwidth= $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width()/percolwidth);
$('#main').width(cols*percolwidth).css('margin','0 auto');
var hArr=[];
$boxs.each(function(index, val) {
/* iterate through array or object */
// console.log(index)
// console.log(val)
var h = $boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h
}
else{
var minheight = Math.min.apply(null,hArr);
var minheightIndex = $.inArray(minheight,hArr);
$(val).css({
'position':'absolute',
'top':minheight+"px",
'left':percolwidth*minheightIndex+"px"
});
// hArr[minheightIndex]+=$boxs.eq(index).outerHeight()
hArr[minheightIndex]+=h
}
});
console.log(hArr)
}
function checkScrollSlide(){
var $lastBox=$("#main>div").last();
var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentHeight = $(window).height();
return (lastBoxDis<scrollTop+documentHeight)?true:false;
}
网友评论