<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>瀑布流</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/><style>*{margin: 0; padding: 0}
body {
margin: 0; padding: 0;
background-color: #eee;
font-size: 84%;}
li,a{list-style: none;text-decoration: none;}.container{
padding: 0 0.531rem;
box-sizing:border-box;}.column:nth-child(even){
float: right;}.column:nth-child(odd){
float: left;}.pic_a {
width: 100%;
display: block;
margin-bottom: 4%;
background-color: #fff;
border-radius: 0.4rem;
position: relative;
padding-bottom: 0.938rem;}
.list_img {
display: block;
margin-bottom: 0.531rem;
vertical-align: bottom;}.list_img,.list_img img{
width: 100%;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
-webkit-border-top-left-radius: 0.4rem;
-webkit-border-top-right-radius: 0.4rem;
-moz-border-radius-topleft: 0.4rem;
-moz-border-radius-topright: 0.4rem;}.com_des {
display: block;
color: #333;
font-size: 0.640rem;
padding: 0 0.469rem;
line-height: 0.906rem;
max-height: 1.800rem;
overflow: hidden;
font-weight: normal;}.peo_like{
display: block;
height: 0.938rem;
max-width: 5rem;
overflow: hidden;
padding: 0 0.219rem;
color: #fff;
font-size: 0.640rem;
background: #0094ff;
border-radius: 0.2rem;
position: absolute;
top: 0.625rem;
left: -0.156rem;}.angel{
display: block;
width: 0.188rem;
height: 0.281rem;
position: absolute;
top: 1.3rem;
left: -0.156rem;}.user_int{
height: 1.375rem;
display: -webkit-box;
margin-top: 0.688rem;
padding: 0 0.469rem;
position: relative;}.user_int i,.user_int i img{
display: block;
height: 1.375rem;
width: 1.375rem;
border-radius: 100%;}.user_int span{
display: block;
width: 5.875rem;
height: 1.375rem;
line-height: 1.375rem;
font-size: 0.747rem;
color: #999;
padding-left: 0.500rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}.user_int b{
display: block;
width: 0.969rem;
height: 0.844rem;
position: absolute;
right: 0.469rem;
top: 0.2rem;}.user_int b img{
width: 0.969rem;
height: 0.844rem;}</style></head>
<body><div id="container" class="container">
</div><script>var waterFall = {
container: document.getElementById("container"),
columnNumber: 1,
columnWidth: document.body.clientWidth/2-12,
// P_001.jpg ~ P_160.jpg
rootImage: "http://cued.xunlei.com/demos/publ/img/",
indexImage: 0,
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
detectLeft: 0,
loadFinish: false,
// 返回固定格式的图片名
getIndex: function() {
var index = this.indexImage;
if (index < 10) {
index = "00" + index;
} else if (index < 100) {
index = "0" + index;
}
return index;
},
// 是否滚动载入的检测
appendDetect: function() {
var start = 0;
for (start; start < this.columnNumber; start++) {
var eleColumn = document.getElementById("waterFallColumn_" + start);
if (eleColumn && !this.loadFinish) {
if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
this.append(eleColumn);
}
}
}
return this;
},
// 滚动载入
append: function(column) {
this.indexImage += 1;
var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";
// 图片尺寸
var aEle = document.createElement("a");
aEle.href = "###";
aEle.className = "pic_a";
aEle.innerHTML = '<p class="list_img"><img src="'+ imgUrl +'" /></p><strong class="com_des">'+ index +'</strong><span class="peo_like">2010人喜欢</span><span class="angel"><img src="images/1.5_angel.png"></span><div class="user_int"><i><img src="images/640.jpg"></i><span>我来自北方小城你来自哪里呢</span><b><img src="images/1.5_xin.png"></b></div>';
column.appendChild(aEle);
if (index >= 160) {
//alert("图片加载光光了！");
this.loadFinish = true;
}
return this;
},
// 页面加载初始创建
create: function() {
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
var start = 0, htmlColumn = '', self = this;
for (start; start < this.columnNumber; start+=1) {
htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="'+ this.columnWidth +'px;">'+
function() {
var html = '', i = 0;
for (i=0; i<5; i+=1) {
self.indexImage = start + self.columnNumber * i;
var index = self.getIndex();
html = html + '<a href="###" class="pic_a"><p class="list_img"><img src="'+ self.rootImage + "P_" + index +'.jpg" /></p><strong class="com_des">'+ index +'</strong><span class="peo_like">2010人喜欢</span><span class="angel"><img src="images/1.5_angel.png"></span><div class="user_int"><i><img src="images/640.jpg"></i><span>我来自北方小城你来自哪里呢</span><b><img src="images/1.5_xin.png"></b></div></a>';
}
return html;
}() +
'</span> ';
}
htmlColumn += '<span id="waterFallDetect" class="column" style="'+ this.columnWidth +'px;"></span>';
this.container.innerHTML = htmlColumn;
this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
return this;
},
refresh: function() {
var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
for (start; start < this.columnNumber; start+=1) {
var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.| | |s)*?a>/gi);
if (arrColumn) {
maxLength = Math.max(maxLength, arrColumn.length);
// arrTemp是一个二维数组
arrTemp.push(arrColumn);
}
}
// 需要重新排序
var lengthStart, arrStart;
for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {
for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {
if (arrTemp[arrStart][lengthStart]) {
arrHtml.push(arrTemp[arrStart][lengthStart]);
}
}
}
if (arrHtml && arrHtml.length !== 0) {
// 新栏个数
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
// 计算每列的行数
// 向下取整
var line = Math.floor(arrHtml.length / this.columnNumber);
// 重新组装HTML
var newStart = 0, htmlColumn = '', self = this;
for (newStart; newStart < this.columnNumber; newStart+=1) {
htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="'+ this.columnWidth +'px;">'+
function() {
var html = '', i = 0;
for (i=0; i<line; i+=1) {
html += arrHtml[newStart + self.columnNumber * i];
}
// 是否补足余数
html = html + (arrHtml[newStart + self.columnNumber * line] || '');
return html;
}() +
'</span> ';
}
htmlColumn += '<span id="waterFallDetect" class="column" style="'+ this.columnWidth +'px;"></span>';
this.container.innerHTML = htmlColumn;
this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
// 检测
this.appendDetect();
}
return this;
},
// 滚动加载
scroll: function() {
var self = this;
window.onscroll = function() {
// 为提高性能，滚动前后距离大于100像素再处理
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
self.scrollTop = scrollTop;
self.appendDetect();
}
};
return this;
},
// 浏览器窗口大小变换
resize: function() {
var self = this;
window.onresize = function() {
var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
// 检测标签偏移异常，认为布局要改变
self.refresh();
}
};
return this;
},
init: function() {
if (this.container) {
this.create().scroll().resize();
}
}};
waterFall.init();</script></body></html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>瀑布流</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/><style>*{margin: 0; padding: 0}
body {
margin: 0; padding: 0;
background-color: #eee;
font-size: 84%;}
li,a{list-style: none;text-decoration: none;}.container{
padding: 0 0.531rem;
box-sizing:border-box;}.column:nth-child(even){
float: right;}.column:nth-child(odd){
float: left;}.pic_a {
width: 100%;
display: block;
margin-bottom: 4%;
background-color: #fff;
border-radius: 0.4rem;
position: relative;
padding-bottom: 0.938rem;}
.list_img {
display: block;
margin-bottom: 0.531rem;
vertical-align: bottom;}.list_img,.list_img img{
width: 100%;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
-webkit-border-top-left-radius: 0.4rem;
-webkit-border-top-right-radius: 0.4rem;
-moz-border-radius-topleft: 0.4rem;
-moz-border-radius-topright: 0.4rem;}.com_des {
display: block;
color: #333;
font-size: 0.640rem;
padding: 0 0.469rem;
line-height: 0.906rem;
max-height: 1.800rem;
overflow: hidden;
font-weight: normal;}.peo_like{
display: block;
height: 0.938rem;
max-width: 5rem;
overflow: hidden;
padding: 0 0.219rem;
color: #fff;
font-size: 0.640rem;
background: #0094ff;
border-radius: 0.2rem;
position: absolute;
top: 0.625rem;
left: -0.156rem;}.angel{
display: block;
width: 0.188rem;
height: 0.281rem;
position: absolute;
top: 1.3rem;
left: -0.156rem;}.user_int{
height: 1.375rem;
display: -webkit-box;
margin-top: 0.688rem;
padding: 0 0.469rem;
position: relative;}.user_int i,.user_int i img{
display: block;
height: 1.375rem;
width: 1.375rem;
border-radius: 100%;}.user_int span{
display: block;
width: 5.875rem;
height: 1.375rem;
line-height: 1.375rem;
font-size: 0.747rem;
color: #999;
padding-left: 0.500rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}.user_int b{
display: block;
width: 0.969rem;
height: 0.844rem;
position: absolute;
right: 0.469rem;
top: 0.2rem;}.user_int b img{
width: 0.969rem;
height: 0.844rem;}</style></head>
<body><div id="container" class="container">
</div><script>var waterFall = {
container: document.getElementById("container"),
columnNumber: 1,
columnWidth: document.body.clientWidth/2-12,
// P_001.jpg ~ P_160.jpg
rootImage: "http://cued.xunlei.com/demos/publ/img/",
indexImage: 0,
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
detectLeft: 0,
loadFinish: false,
// 返回固定格式的图片名
getIndex: function() {
var index = this.indexImage;
if (index < 10) {
index = "00" + index;
} else if (index < 100) {
index = "0" + index;
}
return index;
},
// 是否滚动载入的检测
appendDetect: function() {
var start = 0;
for (start; start < this.columnNumber; start++) {
var eleColumn = document.getElementById("waterFallColumn_" + start);
if (eleColumn && !this.loadFinish) {
if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
this.append(eleColumn);
}
}
}
return this;
},
// 滚动载入
append: function(column) {
this.indexImage += 1;
var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";
// 图片尺寸
var aEle = document.createElement("a");
aEle.href = "###";
aEle.className = "pic_a";
aEle.innerHTML = '<p class="list_img"><img src="'+ imgUrl +'" /></p><strong class="com_des">'+ index +'</strong><span class="peo_like">2010人喜欢</span><span class="angel"><img src="images/1.5_angel.png"></span><div class="user_int"><i><img src="images/640.jpg"></i><span>我来自北方小城你来自哪里呢</span><b><img src="images/1.5_xin.png"></b></div>';
column.appendChild(aEle);
if (index >= 160) {
//alert("图片加载光光了！");
this.loadFinish = true;
}
return this;
},
// 页面加载初始创建
create: function() {
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
var start = 0, htmlColumn = '', self = this;
for (start; start < this.columnNumber; start+=1) {
htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="'+ this.columnWidth +'px;">'+
function() {
var html = '', i = 0;
for (i=0; i<5; i+=1) {
self.indexImage = start + self.columnNumber * i;
var index = self.getIndex();
html = html + '<a href="###" class="pic_a"><p class="list_img"><img src="'+ self.rootImage + "P_" + index +'.jpg" /></p><strong class="com_des">'+ index +'</strong><span class="peo_like">2010人喜欢</span><span class="angel"><img src="images/1.5_angel.png"></span><div class="user_int"><i><img src="images/640.jpg"></i><span>我来自北方小城你来自哪里呢</span><b><img src="images/1.5_xin.png"></b></div></a>';
}
return html;
}() +
'</span> ';
}
htmlColumn += '<span id="waterFallDetect" class="column" style="'+ this.columnWidth +'px;"></span>';
this.container.innerHTML = htmlColumn;
this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
return this;
},
refresh: function() {
var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
for (start; start < this.columnNumber; start+=1) {
var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.| | |s)*?a>/gi);
if (arrColumn) {
maxLength = Math.max(maxLength, arrColumn.length);
// arrTemp是一个二维数组
arrTemp.push(arrColumn);
}
}
// 需要重新排序
var lengthStart, arrStart;
for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {
for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {
if (arrTemp[arrStart][lengthStart]) {
arrHtml.push(arrTemp[arrStart][lengthStart]);
}
}
}
if (arrHtml && arrHtml.length !== 0) {
// 新栏个数
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
// 计算每列的行数
// 向下取整
var line = Math.floor(arrHtml.length / this.columnNumber);
// 重新组装HTML
var newStart = 0, htmlColumn = '', self = this;
for (newStart; newStart < this.columnNumber; newStart+=1) {
htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="'+ this.columnWidth +'px;">'+
function() {
var html = '', i = 0;
for (i=0; i<line; i+=1) {
html += arrHtml[newStart + self.columnNumber * i];
}
// 是否补足余数
html = html + (arrHtml[newStart + self.columnNumber * line] || '');
return html;
}() +
'</span> ';
}
htmlColumn += '<span id="waterFallDetect" class="column" style="'+ this.columnWidth +'px;"></span>';
this.container.innerHTML = htmlColumn;
this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
// 检测
this.appendDetect();
}
return this;
},
// 滚动加载
scroll: function() {
var self = this;
window.onscroll = function() {
// 为提高性能，滚动前后距离大于100像素再处理
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
self.scrollTop = scrollTop;
self.appendDetect();
}
};
return this;
},
// 浏览器窗口大小变换
resize: function() {
var self = this;
window.onresize = function() {
var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
// 检测标签偏移异常，认为布局要改变
self.refresh();
}
};
return this;
},
init: function() {
if (this.container) {
this.create().scroll().resize();
}
}};
waterFall.init();</script></body></html>