扒一扒瀑布流布局的几种实现
摘要：自Pinterest首次使用瀑布流式布局，现在这种页面布局已经得到了非常广泛的应用，比如蘑菇街、美丽说等各类购物网站，图丽网等美女图片展示网站等。现在我们扒一扒瀑布流的几种实现方式（今天在公司加班到10点才回，眼睛好累，代码先不写注解了，有时间再补上，感兴趣的同学可以自己敲着看看效果）：一、cs.....
自Pinterest首次使用瀑布流式布局，现在这种页面布局已经得到了非常广泛的应用，比如蘑菇街、美丽说等各类购物网站，图丽网等美女图片展示网站等。
现在我们扒一扒瀑布流的几种实现方式（今天在公司加班到10点才回，眼睛好累，代码先不写注解了，有时间再补上，感兴趣的同学可以自己敲着看看效果）：
一、css3
实现原理：使用css3的多列属性（column），优点是实现起来比较简单，缺点是兼容性不太好。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>waterFall01-css多列</title>
<style>
html,body{
margin:0;
padding: 0;
}
#container{
column-width:250px;/*列宽*/
-webkit-column-width:250px;
-moz-column-width:250px;
column-gap:5px;/*列间距*/
-webkit-column-gap:5px;
-moz-column-gap:5px;
}
.item{
margin:5px 0;/*因为左右有gap*/
padding:10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.item img{
width: 100%;
}
.item p{
text-align: center;
font-family: Microsoft Yahei;
}
</style>
</head>
<body>
<div id="container">
<div class="item"><img src="images/01/img (1).jpg" alt=""></div>
<div class="item"><img src="images/01/img (2).jpg" alt=""></div>
<div class="item"><img src="images/01/img (3).jpg" alt=""><p>描述信息</p></div>
<div class="item"><img src="images/01/img (4).jpg" alt=""></div>
<div class="item"><img src="images/01/img (5).jpg" alt=""></div>
<div class="item"><img src="images/01/img (6).jpg" alt=""></div>
<div class="item"><img src="images/01/img (7).jpg" alt=""></div>
<div class="item"><img src="images/01/img (8).jpg" alt=""></div>
<div class="item"><img src="images/01/img (9).jpg" alt=""></div>
<div class="item"><img src="images/01/img (10).jpg" alt=""></div>
<div class="item"><img src="images/01/img (11).jpg" alt=""></div>
<div class="item"><img src="images/01/img (12).jpg" alt=""></div>
<div class="item"><img src="images/01/img (13).jpg" alt=""></div>
<div class="item"><img src="images/01/img (14).jpg" alt=""></div>
<div class="item"><img src="images/01/img (15).jpg" alt=""></div>
<div class="item"><img src="images/01/img (16).jpg" alt=""></div>
<div class="item"><img src="images/01/img (17).jpg" alt=""></div>
<div class="item"><img src="images/01/img (18).jpg" alt=""></div>
<div class="item"><img src="images/01/img (19).jpg" alt=""></div>
<div class="item"><img src="images/01/img (20).jpg" alt=""></div>
<div class="item"><img src="images/01/img (21).jpg" alt=""></div>
<div class="item"><img src="images/01/img (22).jpg" alt=""></div>
<div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div>
<div class="item"><img src="images/01/img (21).jpg" alt=""></div>
<div class="item"><img src="images/01/img (22).jpg" alt=""></div>
<div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div>
<div class="item"><img src="images/01/img (1).jpg" alt=""></div>
<div class="item"><img src="images/01/img (2).jpg" alt=""></div>
<div class="item"><img src="images/01/img (3).jpg" alt=""></div>
<div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>
<div class="item"><img src="images/01/img (4).jpg" alt=""></div>
<div class="item"><img src="images/01/img (5).jpg" alt=""></div>
<div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>
<div class="item"><img src="images/01/img (20).jpg" alt=""></div>
<div class="item"><img src="images/01/img (11).jpg" alt=""></div>
<div class="item"><img src="images/01/img (19).jpg" alt=""></div>
<div class="item"><img src="images/01/img (13).jpg" alt=""></div>
<div class="item"><img src="images/01/img (15).jpg" alt=""></div>
<div class="item"><img src="images/01/img (14).jpg" alt=""></div>
<div class="item"><img src="images/01/img (16).jpg" alt=""></div>
<div class="item"><img src="images/01/img (21).jpg" alt=""></div>
<div class="item"><img src="images/01/img (17).jpg" alt=""></div>
<div class="item"><img src="images/01/img (18).jpg" alt=""></div>
<div class="item"><img src="images/01/img (12).jpg" alt=""></div>
<div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div>
<div class="item"><img src="images/01/img (10).jpg" alt=""></div>
<div class="item"><img src="images/01/img (6).jpg" alt=""></div>
<div class="item"><img src="images/01/img (7).jpg" alt=""></div>
<div class="item"><img src="images/01/img (8).jpg" alt=""></div>
</div>
</body>
</html>
二、JavaScript
实现原理：原生js操作dom,动态插入新图片
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>waterFall02</title>
<style>
*{
margin: 0;
padding: 0;
}
#main{
position: relative;;
}
.item{
padding: 15px 0 0 15px;
float: left;
}
.box{
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
}
</style>
<script>
window.onload = function(){
waterFall("#main",".item");
var fakeData = {'data':[{'src':'img (1).jpg'},{'src':'img (2).jpg'},{'src':'img (3).jpg'},{'src':'img (5).jpg'},{'src':'img (9).jpg'},{'src':'img (4).jpg'},{'src':'img (6).jpg'},{'src':'img (7).jpg'}]};
window.onscroll = function(){
if(checkScroll()){
var oParent = g("#main"), oItem, oBox, oImg;
for(var i = 0;i < fakeData.data.length; i++){
oItem = c("div");
oItem.className = "item";
oParent.appendChild(oItem);
oBox = c("div");
oBox.className = "box";
oItem.appendChild(oBox);
oImg = c("img");
oImg.src = "images/01/" + fakeData.data[i].src;
oBox.appendChild(oImg);
}
waterFall("#main",".item");
}
}
};
function g(selector){
return selector.substr(0,1) === "#" ?
document.getElementById(selector.substr(1)) : document.getElementsByClassName(selector.substr(1));
}
function c(ele){
return document.createElement(ele);
}
function waterFall(parent, item){
var oParent = g(parent);
var items = g(item);
var iWidth = items[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / iWidth);
oParent.style.cssText = "width:" + iWidth * cols +"px;margin: 0 auto;";
var iHeightArr = [],iHeight, minH, minHIndex;
for(var i = 0;i < items.length; i++){
iHeight = items[i].offsetHeight;
if(i < cols){
iHeightArr[i] = iHeight;
}else{
minH = Math.min.apply(null,iHeightArr);
minHIndex = getMinHeightIndex(iHeightArr, minH);
items[i].style.position = "absolute";
items[i].style.top = minH + "px";
items[i].style.left = items[minHIndex].offsetLeft + "px";
iHeightArr[minHIndex] += items[i].offsetHeight;
}
}
}
var main = g("#main");
/*
*获取元素数组中最小高度元素的index
*/
function getMinHeightIndex(arr, minHeight){
for(var i =0;i < arr.length;i++){
if(arr[i] === minHeight)
return i;
}
return -1;
}
function checkScroll(){
var items = g(".item");
var doc = document.documentElement, body = document.body;
var lastItemHeight = items[items.length - 1].offsetTop + Math.floor(items[items.length - 1].offsetHeight /2);//最后一个item距离网页顶部+自身高度的一半，这样未滚到底就开始加载
var scrollTop = doc.scrollTop || body.scrollTop;
var documentHeight = doc.clientHeight;
return lastItemHeight < scrollTop + documentHeight;
}
</script>
</head>
<body>
<div id="main">
<div class="item">
<div class="box"><img src="images/01/img (1).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (2).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (3).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (4).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (5).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (6).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (7).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (8).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (9).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (10).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (11).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (12).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (13).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (14).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (15).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (16).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (17).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (18).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (19).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (20).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (21).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (22).jpg" alt=""></div>
</div>
<div class="item">
<div class="box"><img src="images/01/img (23).jpg" alt=""></div>
</div>
</div>
</body>
</html>
三、jQuery
实现原理：同上一种，用jQuery，只为简化dom操作代码
上代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>waterFall03</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
float: left;
}
.content{
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.content img{
width: 180px;
height: auto;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(function(){
$(window).on("load",function(){
imgLocation();
var dataImg = {"data":[{"src":"img (1).jpg"},{"src":"img (2).jpg"},{"src":"img (3).jpg"},{"src":"img (4).jpg"},{"src":"img (5).jpg"},{"src":"img (6).jpg"},{"src":"img (7).jpg"}]};
window.onscroll = function(){
if(scrollside()){
$.each(dataImg.data,function(index,value){
var box = $("<div>").addClass("box").appendTo($("#container"));
var content = $("<div>").addClass("content").appendTo(box);
$("<img>").attr("src","images/01/"+$(value).attr("src")).appendTo(content);
});
imgLocation();
}
};
});
});
function scrollside(){
var box = $(".box");
var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight = $(document).width();
var scrollHeight = $(window).scrollTop();
return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}
function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index]= boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).height();
}
});
}
</script>
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="images/01/img (1).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (2).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (3).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (4).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (5).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (6).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (7).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (8).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (9).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (10).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (11).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (12).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (13).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (14).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (15).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (16).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (17).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (18).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (19).jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="images/01/img (20).jpg">
</div>
</div>
</div>
</body>
</html>
附：代码包下载链接
相关文章
最新发布
阅读排行
热门文章
猜你喜欢