瀑布滚布局
最近发现这种布局蛮流行的，所以就自己动手写了一个。
HTML
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {margin:0;padding:0;}
body { background:#f7f7f7;}
#box {position:relative; font-size:12px; line-height:1.5;margin:0 auto;height:600px; overflow:auto;}
.item {width:220px; background:#fff; color:#666; position:absolute;border:1px solid #ddd;-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.1);box-shadow: 1px 1px 3px rgba(0,0,0,0.1);}
.item img {display: block; margin: 10px auto;border:0;}
.item p { background:#f7f7f7;padding:10px;}
</style>
</head>
<body>
<div id="box">
<div id="content">
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img1/M00/B3/7E/CgAPDE9SGyyc-9qGAACB9GPKGs4142_200x0x1.JPG" alt="">
</a>
<p class="description">OL气质小翻领透视性感百褶宽松长袖#衬衫##雪纺衫# http://sodao.me/8Im9dX</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img2/M07/B2/D7/CgAPDU9O4FygTYOlAARRjWZ2mAU271_200x0x1.JPG" alt="">
</a>
<p class="description">#针织衫#下摆蕾丝花边中长款针织衫，衣服质量款式很好哦，面料手感也不差。很赞。 http://sodao.me/IkQZRd</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img1/M06/B4/A4/CgAPC09O0jOx6NrLAACRgSyVC2s188_200x0x1.JPG" alt="">
</a>
<p class="description">复古海马毛绒衫气质拼接状两段针织衫，上身很好看哦。 http://sodao.me/IkQ02T</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img2/M01/B4/59/CgAPDU9SHM2x-ZMXAAJGN8iSwHY415_200x0x1.JPG" alt="">
</a>
<p class="description">超炫面料舒适针织带帽两件式#针织衫#，百搭款，白菜价啦~购买地址：http://sodao.me/8ImW7u</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img1/M02/B6/35/CgAPC09SG6LNzGTHAACqNlBrsOk132_200x0x1.JPG" alt="">
</a>
<p class="description">韩版金葱领经典复古针织双插兜套头#毛衣##针织衫# http://sodao.me/8Im9Ek</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img1/M07/B4/26/CgAPC09NwHaDNxtTAAGgEOHTFfk100_200x0x1.JPG" alt="">
</a>
<p class="description">韩版宽松中长款条纹#针织衫# http://sodao.me/8W1uWT</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img1/M02/B0/85/CgAPDE9MWYOY9F1tAAZCT7idtwI661_200x0x1.JPG" alt="">
</a>
<p class="description">韩版甜美珍珠装饰镂空圆领红色宽松#针织衫# http://sodao.me/kpB6gZ</p>
</div>
<div class="item">
<a target="_blank" class="image" href="/pin/85581/">
<img src="http://imgcache.mysodao.com/img1/M06/B3/3A/CgAPC09MV6TRnnr9AAE2QRSbomo936_200x0x1.JPG" alt="">
</a>
<p class="description">#单鞋#韩国杂志款公主鞋！韩版上脚系带超舒服高跟粗跟防水台鱼嘴及踝靴#凉鞋# http://sodao.me/kpB6Ps</p>
</div>
</div>
</div>
<script src="waterfall.js"></script>
<script>
window.onload = function(){
new waterfall();
}
</script>
</body>
</html>
data.html
View CodeJS:
/**
作者：天涯
QQ：63886829
eMail:flyinsky@gmail.com
说明：最近比较流行瀑布流布局，可以作为页面的一部份，给最外层的box设置高和宽就可以了，也可以作为整
个页面，也就是将box设置为浏览器大小，当滚动条拉到box的最底部的时候，会加载新内容，所以内容层
高度一定要比最外层高。
**/
function waterfall(){return this.init.apply(this,arguments)}
waterfall.prototype = {
init:function(opts){
var set = this.extend({
boxID:'box',//最外层
contentID:'content',//内容层
margin:10,//每块内容之间的间距
minColumn:3,//最小列数
url:'data.html'//加载新数据的地址
},opts||{});
var _this = this;
this.set = set;
this.box = this.$(set.boxID);
this.boxHeight = this.box.offsetHeight;
this.content = this.$(set.contentID);
this.isLoading = false;
this.timer = null;
this.loadTime = 0;//这个是用来做测试的，也是作为ulr后面的查询语句，用在实际项目中根据实际需求改
this.setElementsPos();
window.onresize = function(){_this.resize()}
},
/*设置每块内容的位置，以及整体内容的最大高度*/
setElementsPos:function(){
var set = this.set,pos = [],position = [],i=0,len,items,itemWidth,column,n,m;
items = this.$$('div','item',this.content);
itemWidth = items[0].offsetWidth;
len = items.length;
column = Math.max(Math.floor(this.box.offsetWidth / (set.margin + itemWidth)),set.minColumn || 0);
m = Math.floor(len / column);
for(;i<len;i++){
n = i%column;
position[n] !== undefined ? (position[n]+=items[i-column].offsetHeight+set.margin) : (position[n] = 0);
items[i].style.top = position[n] + 'px';
items[i].style.left = n * (items[i].offsetWidth + set.margin) + 'px';
if(i>(n===0 ? m-1 : m)*column -1) pos.push(items[i].offsetHeight + position[n])
};
this.content.style.height = Math.max.apply(null,pos) + 'px';
this.content.style.width = column*(itemWidth+set.margin)+'px';
this.doScroll();
},
/*拖动滚动条*/
doScroll:function(){
var box = this.box,boxHeight = this.boxHeight,content = this.content,contentHeight= this.content.offsetHeight;
var _this = this;
box.onscroll = function(){
var st = box.scrollTop;
if(st > contentHeight - boxHeight - 10){
_this.load();
}
}
},
/*改变外框大小*/
resize:function(){
var _this = this,set = this.set;
if(this.timer) clearTimeout(this.timer);
this.timer = setTimeout(function(){
_this.setElementsPos();
},200);
},
/*当滚动条拉倒最下面的时候，ajax加载内容*/
load:function(){
if(this.loadTime == 5 || this.isLoading) return;
this.isLoading = true;
var xhr = this.createXhr(),_this = this,set = this.set;
xhr.open('GET',set.url+'?data='+this.loadTime);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
++_this.loadTime;
_this.isLoading = false;
_this.insertData(xhr.responseText);
}
}
}
xhr.send(null);
},
/*将load下来的数据插入到content中，并重新计算和设置每个元素的位置*/
insertData:function(data){
var frag = document.createDocumentFragment(),div = document.createElement('div'),els;
div.innerHTML = data;
els = this.$$('div','item',div);
for(var i=0,len=els.length;i<len;i++){
frag.appendChild(els[i].cloneNode(true));
};
this.content.appendChild(frag);
this.setElementsPos();
},
createXhr:function(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else{
var xhr = null;
try{
xhr = new ActiveXObject('MSXML2.XmlHttp.6.0');
return xhr;
}catch(e){
try{
xhr = new ActiveXObject('MSXML2.XmlHttp.3.0');
return xhr;
}catch(e){
throw Error('cannot create XMLHttp object!');
};
};
};
},
$:function(id){
return typeof id == 'string' ? document.getElementById(id) : id;
},
$$:function(node,oClass,parent){
var re = [],els,el,i=0;
parent = parent || document;
els = parent.getElementsByTagName(node);
for(;i<els.length;i++){
el = els[i];
if((' '+el.className+' ').indexOf(' '+oClass+' ') > -1) re.push(el);
};
return re;
},
extend:function(target,o){
for(var key in o) target[k] = o[k];
return target;
}
}
效果图：
