万恶的瀑布流终结者T000

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

[email protected]/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);
*/

　　

时间： 2024-10-18 14:06:58

万恶的瀑布流终结者T000的相关文章

扩展版瀑布流

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>瀑布流-扩展版02</title> <style type="text/css"> * { margin: 0; padding: 0; } #list { list-style: none; position: relative; margin: 0 auto; }

PSCollectionView瀑布流实现

[-] 一基本原理 二具体实现 相关数据结构 视图更新方式 relayoutViews方法 removeAndAddCellsIfNecessary方法 select方法 重用数据块视图机制 三使用方法 四其他瀑布流实现 PSCollectionView是一个实现较简洁的仿Pinterest瀑布流iOS版实现,使用UIScrollView做容器,每列列宽固定,高度可变,使用方式类似UITableView.其效果如图: 一.基本原理 其基本实现原理为: 列数固定,根据列数每列存储一个当前列的高度值

自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现,现在我来实现一个带文字标题的.效果如下: 每个item都是由图片和文字标题两部分组成. 布局方式为ScrollView里面嵌套一个水平方向的LinearLayout,里面再嵌套两个竖直方向的LinearLayout,然后判断竖直方向的两个LinearLayout的高度,向比较低的那个Linearlayout里面添加item. 下面是代码 <ScrollView xmlns:android="http://schemas.androi

1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术

1.网页后退 /前进  <a href="javascript:history.go(-1);">后退</a><a href="javascript:history.go(1);">前进</a> 2.瀑布流              瀑布流是目前一种比较流行的页面布局和加载效果.百度,花瓣等一些好的网站都广泛用了这样一种效果,适用于单页面展示对内容的页面.这几天就跟着一些资料学习了一下瀑布流效果的制作.其原理是利用js

IOS 瀑布流UICollectionView实现

IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和tableView不一样,ContentView的内容完全需要我们自己去添加. 它与tableview相比,他的初始化需要FlowLayout并且大部分操作在其上. UIcollectionView的实用性极强,虽然有时他并不是最好的解决方案,但是它可以很灵活的实现各种效果. 图(一) 如图,模拟器

自定义控件三部曲视图篇（三）——瀑布流容器WaterFallLayout实现

前言:只要在前行,梦想就不再遥远 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 前面两节讲解了有关ViewGroup的onMeasure.onLayout的知识,这节我们深入性地探讨一下,如何实现经常见到的瀑布流容器,本节将实现的效果图如下: 从效果图中可以看出这里要完成的几个功能: 1.图片随机添加 2.在添加图片时,总是将新图片插入到当前最短的列中 3.每个Item后,

【jQuery Demo】图片瀑布流实现

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest.美丽说.蘑菇街这类型的网站. 下面是效果: 核心内容: 1.先设置布局,主要HTML代码如下 <div id="container"> <div class="box"> <div class="co

js实现瀑布流以及加载效果

一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在"很久"以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便. 二.瀑布流的优缺点 优点: 1.节省了页面的空间,不再需要导航和页码按钮. 2.增强了用户的体验,使用户的体验更多的是在于浏览图

jQuery瀑布流插件——jQuery.Waterfall

插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可.滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据. 注意的地方: 如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合p