滝のロールレイアウト
37774 ワード
最近このレイアウトが流行っていることに気づいたので、自分で書いてみました.
HTML
View Code
data.html
View Code
JS:
効果図:
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 Code
JS:
/**
：
QQ：63886829
eMail:[email protected]
： ， ， 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;
}
}効果図:
