码迷，mamicode.com
首页 > 其他好文 > 详细

万恶的瀑布流终结者T000

时间：2015-07-22 22:22:06      阅读：159      评论：0      收藏：0      [点我收藏+]

标签：

要解决的问题
1.如果纯文字的条目信息，可以立即获取到高度信息，很简单就可以搞定，麻烦的是内容里有图片，图片高度未知，直接通过jquery的height()方法获取到的高度不准确，有时是默认的高度，导致在分配位置的时候多个分配到同一列去，不均匀。
2.绝对定位分配位置是一种方法，但是每个位置都要去计算，如果布局修改，要修改很多地方。
3.显示的时候顺序问题，由于检测图片信息是在setTimeout里单独执行，如果最先检测到的就显示会引起显示问题，如果所有检测完一起显示会引起页面一时的空白。
解决的办法
1.检测到图片高度信息的时候立即执行位置分配（imageready）。
2.瀑布流虽然在行上不规则，但在列上是很规则的，有几条流就用几个ul。新分配的添加到对应的ul里。
3. 按照列表的顺序显示，通过递归回调，检测完一条信息后执行递归，直至显示完当前前10条。
 

Mark@2015/07/22
<!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;
console.log(newWidth + ‘,‘ + newHeight)
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(‘<div class="waterfall"><ul class="water-col" id="one"></ul><ul class="water-col" id="two"></ul></div>‘);
this.colArrs[0]=new Col({id:"one",height:0});
this.colArrs[1]=new Col({id:‘two‘,height:0});
},
renderList:function(){
var length=this.model.length;
var model=this.model;
var tempContainer=null;
for(var i=0;i<length;i++){
tempContainer=this.getMinOne();
//console.log(tempContainer);
tempContainer.container.append(model[i]);
tempContainer.curHeight+=$(model[i]).height();
}
},
destroy:function(){
//unbind
}
};


var modelArr=getModelArr(0,10);
var colApp=new ListItem({
model:modelArr.node,
container:"main"
});
setTimeout(function(){
var temp=getModelArr(1,10);
loadImg(temp.img,function(){
colApp.setModel(temp.node);
});
//colApp.setModel(getModelArr(1,10));
},2000);
setTimeout(function(){
var temp=getModelArr(2,10);
loadImg(temp.img,function(){
colApp.setModel(temp.node);
});

//colApp.setModel(getModelArr(1,10));
},4000);

function getModelArr(start,num){
var temp=[],i=0,url=[];
var lists=$("ul li");
var end=0,src;
if(start*num<lists.length){
i=start*num;
num=(lists.length-start*num)>num?num:lists.length-start*num;
end=i+num;
//    console.log(i+"----"+end+"----"+lists.length);
}else{
return null;
}
lists.each(function(index,element){
if(index>=i&&index<end){
temp.push(element);
src=$(element).find(‘img‘);
if(src){
url.push(src.attr("src"));
}
//console.log(i+"=="+index);
}
});
return {‘node‘:temp,‘img‘:url};
}

</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);
*/

　　

万恶的瀑布流终结者T000

标签：

原文地址：http://www.cnblogs.com/licifer/p/4668694.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！