万恶的瀑布流终结者T000
要解决的问题
1.如果纯文字的条目信息，可以立即获取到高度信息，很简单就可以搞定，麻烦的是内容里有图片，图片高度未知，直接通过jquery的height()方法获取到的高度不准确，有时是默认的高度，导致在分配位置的时候多个分配到同一列去，不均匀。
2.绝对定位分配位置是一种方法，但是每个位置都要去计算，如果布局修改，要修改很多地方。
3.显示的时候顺序问题，由于检测图片信息是在setTimeout里单独执行，如果最先检测到的就显示会引起显示问题，如果所有检测完一起显示会引起页面一时的空白。
解决的办法
1.检测到图片高度信息的时候立即执行位置分配（imageready）。
2.瀑布流虽然在行上不规则，但在列上是很规则的，有几条流就用几个ul。新分配的添加到对应的ul里。
3. 按照列表的顺序显示，通过递归回调，检测完一条信息后执行递归，直至显示完当前前10条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyTestLib</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#main{
width:1010px;
margin:0 auto;
}
.waterfall{
width:1010px;
margin:0 auto;
}
#one{
width:500px;
float:left;
}
#two{
width:500px;
float:left;
}
</style>
</head>
<body>
<div id="main">
</div>
<ul style="display:none;">
<li>
<p><a href="./qd/201506/t20150629_12621423.htm" target="_blank" title="人家的天气预报为什么这么红？男人还都爱看">人家的天气预报为什么这么红？男人还都爱看</a></p>
<a href="./qd/201506/t20150629_12621423.htm" target="_blank"><img src="./qd/201506/W020150629339286716326.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150629_12621402.htm" target="_blank" title="这不是作死！据说这是悬崖腾空的情侣秀恩爱新招式">这不是作死！据说这是悬崖腾空的情侣秀恩爱新招式</a></p>
<a href="./qd/201506/t20150629_12621402.htm" target="_blank"><img src="./qd/201506/W020150629338842887095.png" alt="1.png" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150629_12621401.htm" target="_blank" title="男子挑战穿高跟鞋一天 不到12小时就“投降”">男子挑战穿高跟鞋一天 不到12小时就“投降”</a></p>
<a href="./qd/201506/t20150629_12621401.htm" target="_blank"><img src="./qd/201506/W020150629338838678754.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150619_12575883.htm" target="_blank" title="发呆接吻大比赛 小学生更在行？">发呆接吻大比赛 小学生更在行？</a></p>
<a href="./qd/201506/t20150619_12575883.htm" target="_blank"><img src="./qd/201506/W020150619345122781721.jpg" alt="资料图片：年仅9岁的小妹妹赢得了发呆比赛的冠军。" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150619_12575882.htm" target="_blank" title="锁骨放硬币玩爆反手摸肚脐！你能放几枚？">锁骨放硬币玩爆反手摸肚脐！你能放几枚？</a></p>
<a href="./qd/201506/t20150619_12575882.htm" target="_blank"><img src="./qd/201506/W020150619345117007428.jpg" alt="女网友秀火辣身材新玩法蹿红：锁骨放硬币" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150617_12562491.htm" target="_blank" title="秦桧夫人像戴上胸罩了？">秦桧夫人像戴上胸罩了？</a></p>
<a href="./qd/201506/t20150617_12562491.htm" target="_blank"><img src="./qd/201506/W020150617300413091481.png" alt="1.png" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550770.htm" target="_blank" title="萌帅妖孽！4岁小男孩cos各种艺人style神还原">萌帅妖孽！4岁小男孩cos各种艺人style神还原</a></p>
<a href="./qd/201506/t20150615_12550770.htm" target="_blank"><img src="./qd/201506/W020150615369190125575.jpg" alt="帅到爆！4岁小男孩cos各种艺人style" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550569.htm" target="_blank" title="水果馅的香肠与众不同！尝起来到底是什么味？">水果馅的香肠与众不同！尝起来到底是什么味？</a></p>
<a href="./qd/201506/t20150615_12550569.htm" target="_blank"><img src="./qd/201506/W020150615361800447019.jpg" alt="与众不同的水果馅香肠，尝起来是什么味啊？" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550530.htm" target="_blank" title="最忠诚的动物！有对自己的另一半忠贞不渝的节操">最忠诚的动物！有对自己的另一半忠贞不渝的节操</a></p>
<a href="./qd/201506/t20150615_12550530.htm" target="_blank"><img src="./qd/201506/W020150615360344819139.jpg" alt="你知道吗？这些是自然界最忠情的动物" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550074.htm" target="_blank" title="花式炫腹！反手摸到肚脐身材好？">花式炫腹！反手摸到肚脐身材好？</a></p>
<a href="./qd/201506/t20150615_12550074.htm" target="_blank"><img src="./qd/201506/W020150615343842310649.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150612_12544540.htm" target="_blank" title="西南太平洋岛国渔民长矛捕鱼技艺精湛">西南太平洋岛国渔民长矛捕鱼技艺精湛</a></p>
<a href="./qd/201506/t20150612_12544540.htm" target="_blank"><img src="./qd/201506/W020150612591877780400.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150612_12544523.htm" target="_blank" title="鱼类群游是一种遗传行为？庞大群体景象壮观">鱼类群游是一种遗传行为？庞大群体景象壮观</a></p>
<a href="./qd/201506/t20150612_12544523.htm" target="_blank"><img src="./qd/201506/W020150612589700442591.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150629_12621423.htm" target="_blank" title="人家的天气预报为什么这么红？男人还都爱看">人家的天气预报为什么这么红？男人还都爱看</a></p>
<a href="./qd/201506/t20150629_12621423.htm" target="_blank"><img src="./qd/201506/W020150629339286716326.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150629_12621402.htm" target="_blank" title="这不是作死！据说这是悬崖腾空的情侣秀恩爱新招式">这不是作死！据说这是悬崖腾空的情侣秀恩爱新招式</a></p>
<a href="./qd/201506/t20150629_12621402.htm" target="_blank"><img src="./qd/201506/W020150629338842887095.png" alt="1.png" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150629_12621401.htm" target="_blank" title="男子挑战穿高跟鞋一天 不到12小时就“投降”">男子挑战穿高跟鞋一天 不到12小时就“投降”</a></p>
<a href="./qd/201506/t20150629_12621401.htm" target="_blank"><img src="./qd/201506/W020150629338838678754.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150619_12575883.htm" target="_blank" title="发呆接吻大比赛 小学生更在行？">发呆接吻大比赛 小学生更在行？</a></p>
<a href="./qd/201506/t20150619_12575883.htm" target="_blank"><img src="./qd/201506/W020150619345122781721.jpg" alt="资料图片：年仅9岁的小妹妹赢得了发呆比赛的冠军。" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150619_12575882.htm" target="_blank" title="锁骨放硬币玩爆反手摸肚脐！你能放几枚？">锁骨放硬币玩爆反手摸肚脐！你能放几枚？</a></p>
<a href="./qd/201506/t20150619_12575882.htm" target="_blank"><img src="./qd/201506/W020150619345117007428.jpg" alt="女网友秀火辣身材新玩法蹿红：锁骨放硬币" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150617_12562491.htm" target="_blank" title="秦桧夫人像戴上胸罩了？">秦桧夫人像戴上胸罩了？</a></p>
<a href="./qd/201506/t20150617_12562491.htm" target="_blank"><img src="./qd/201506/W020150617300413091481.png" alt="1.png" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550770.htm" target="_blank" title="萌帅妖孽！4岁小男孩cos各种艺人style神还原">萌帅妖孽！4岁小男孩cos各种艺人style神还原</a></p>
<a href="./qd/201506/t20150615_12550770.htm" target="_blank"><img src="./qd/201506/W020150615369190125575.jpg" alt="帅到爆！4岁小男孩cos各种艺人style" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550569.htm" target="_blank" title="水果馅的香肠与众不同！尝起来到底是什么味？">水果馅的香肠与众不同！尝起来到底是什么味？</a></p>
<a href="./qd/201506/t20150615_12550569.htm" target="_blank"><img src="./qd/201506/W020150615361800447019.jpg" alt="与众不同的水果馅香肠，尝起来是什么味啊？" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550530.htm" target="_blank" title="最忠诚的动物！有对自己的另一半忠贞不渝的节操">11111最忠诚的动物！有对自己的另一半忠贞不渝的节操</a></p>
<a href="./qd/201506/t20150615_12550530.htm" target="_blank"><img src="./qd/201506/W020150615360344819139.jpg" alt="你知道吗？这些是自然界最忠情的动物" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150615_12550074.htm" target="_blank" title="花式炫腹！反手摸到肚脐身材好？">花式炫腹！反手摸到肚脐身材好？</a></p>
<a href="./qd/201506/t20150615_12550074.htm" target="_blank"><img src="./qd/201506/W020150615343842310649.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150612_12544540.htm" target="_blank" title="西南太平洋岛国渔民长矛捕鱼技艺精湛">西南太平洋岛国渔民长矛捕鱼技艺精湛</a></p>
<a href="./qd/201506/t20150612_12544540.htm" target="_blank"><img src="./qd/201506/W020150612591877780400.jpg" width="350"/></a>
</li>
<li>
<p><a href="./qd/201506/t20150612_12544523.htm" target="_blank" title="鱼类群游是一种遗传行为？庞大群体景象壮观">鱼类群游是一种遗传行为？庞大群体景象壮观</a></p>
<a href="./qd/201506/t20150612_12544523.htm" target="_blank"><img src="./qd/201506/W020150612589700442591.jpg" width="350"/></a>
</li>
</ul>
<script src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var imgReady = (function() {
var list = [],
intervalId = null,
tick = function() {
var i = 0;
for (; i < list.length; i++) list[i].end ? list.splice(i--, 1) : list[i]();
!list.length && stop();
},
stop = function() {
clearInterval(intervalId);
intervalId = null;
};
return function(url, ready, load, error) {
var onready, width, height, newWidth, newHeight, img = new Image();
img.src = url;
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};
width = img.width;
height = img.height;
img.onerror = function() {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
onready = function() {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height || newWidth * newHeight > 1024) {
ready.call(img);
onready.end = true;
};
};
onready();
img.onload = function() {
!onready.end && onready();
load && load.call(img);
img = img.onload = img.onerror = null;
};
if (!onready.end) {
list.push(onready);
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
function Col(opts) {
this.container = opts.id;
this.curHeight = opts.height || 0;
}
function ListItem(opts) {
this.container = $(opts.container);
this.colArrs = [];
this.model = opts.model || null;
}
ListItem.prototype = {
init: function() {
this.render();
},
setModel: function(model) {
this.model = model;
this.renderList();
},
getMinOne: function() {
var temp = this.colArrs[0].curHeight,
min = 0;
for (var i = 0; i < this.colArrs.length; i++) {
if (temp > this.colArrs[i].curHeight) {
temp = this.colArrs[i].curHeight;
min = i;
}
}
return this.colArrs[min];
},
render: function() {
this.renderStruct();
this.renderList();
},
renderStruct: function() {
this.container.html('<ul class="tiles one" style="width:49%;float:left;" ></ul><ul style="width:49%;float:right;" class="tiles two" ></ul>');
this.colArrs[0] = new Col({
id: this.container.find("ul.one"),
height: 0
});
this.colArrs[1] = new Col({
id: this.container.find("ul.two"),
height: 0
});
},
renderList: function() {
var _this = this;
this.renderNext(0);
},
renderNext: function(index) {
var img = null,
_this = this;
if (index === this.model.length) return false;
img = $(this.model[index]).find('img');
if (img) {
src = img.attr('src');
imgReady(src, function() {
_this.renderOne(_this.model[index++]);
_this.renderNext(index);
}, function() {}, function() {
_this.renderOne(_this.model[index++]);
_this.renderNext(index);
});
} else {
this.renderOne(this.model[index]);
index++;
this.renderNext(index);
}
},
renderOne: function(node) {
var tempContainer = this.getMinOne();
tempContainer.container.append(node);
tempContainer.curHeight += $(node).height();
},
destroy: function() {}
};
function SlidesController(opts) {
this.dataId = opts.dataId;
this.container = opts.container;
this.curPage = 0;
this.pageNum = 10;
}
SlidesController.prototype = {
init: function() {
//
this.modelArr = getModelArr(this.dataId, this.curPage, this.pageNum);
this.colApp = new ListItem({
model: this.modelArr,
container: this.container
});
this.colApp.init();
this.bind();
},
bind: function() {
var _this = this;
$(window).bind('scroll', function() {
// console.log(_this);
var curpos = $(window).scrollTop();
_this.pos(curpos);
});
},
pos: function(pos) {
var curH = $("#main").height();
if (curH < pos + 400) {
//this.getMore();
this.getMore();
}
},
getMore: function() {
this.modelArr = getModelArr(this.dataId, this.curPage, this.pageNum);
this.curPage++;
//console.log(this.dataId+"==="+this.curPage+"==="+this.pageNum);
if (this.modelArr)
this.colApp.setModel(this.modelArr);
},
destroy: function() {
//console.log("unbind");
$(window).unbind();
}
}
function getModelArr(where, start, num) {
var temp = [],
i = 0;
var lists = $(where);
var end = 0;
if (start * num < lists.length) {
i = start * num;
num = (lists.length - start * num) > num ? num : lists.length - start * num;
end = i + num;
} else {
return null;
}
//console.log(start+"==="+num);
lists.each(function(index, element) {
if (index >= i && index < end) {
temp.push(element);
}
});
return temp;
}
var modelArr=getModelArr("ul li", 0, 10);
var colApp = new ListItem({
model: modelArr,
container: "#main"
});
colApp.init();
setTimeout(function(){
var modelArr=getModelArr("ul li", 1, 10);
colApp.setModel(modelArr);
},2000);
</script>
</body>
</html>
上面代码中的图片路径需要统一替换下
/* v1.1版本中用的所有的图片信息获取到后在执行添加，low
function loadImg(urls,callback){
var count=0;
for(var m=0;m<urls.length;m++){
imgReady(urls[m],function(){
count++;
if(count==urls.length){
callback();
}
},function(){
},function(){
count++;
if(count==urls.length){
callback();
}
});
}
}
loadImg(modelArr.img,function(){
colApp.init();
});
colApp.init();
//colApp.setModel(modelArr);
setTimeout(function(){
colApp.setModel(getModelArr(1,10));
},2000);
setTimeout(function(){
colApp.setModel(getModelArr(2,10));
},4000);
*/
