html li 做瀑布流,一个简单的瀑布流效果(主体形式自写)

闲着没事，自己写了个瀑布流，我个人写脚本或者是网页的习惯是：只参考别人的效果，很少参考别人的代码，有时侯我宁愿用审查元素来推断代码，也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间，但是我做的东西的每一个细节我都还能记清楚(当然肯定后来会忘)，因为是我实现的。下面说正题：

瀑布流的主体即为几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。

主体形式如下：

复制代码 代码如下:

• anytext..
• anytext..

...

• anytext..
• anytext..

...

....

css定义如下：

复制代码 代码如下:

.pics {

float:left;

list-style:none;

margin-left:10px;

margin-right:10px;

width:230px;

}

.pics li {

display:block;

width:100%;

margin:0 auto;

margin-bottom:10px;

position:relative;

background-color:#FFF;

box-shadow: 0 1px 2px 0;

padding-top:10px;

}

.pic {

width:92%; margin:0 auto;

padding-top:10px;

text-align:center;

font-size:180px;

background-color:#0CF;

}

.pic img {

width:100%;

margin:0 auto;

}

.content {

width:92%;

margin:0 auto;

padding-top:10px;

height:50px;

text-overflow:ellipsis;

white-space:nowrap;

overflow:hidden;

}

脚本实现如下：

复制代码 代码如下:

$(function(){

//alert($(window).height()); 浏览器当前窗口可视区域高度

//alert($(document).height());

//浏览器当前窗口文档的高度 alert($(document.body).height());

//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));

//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width());

//浏览器当前窗口可视区域宽度 alert($(document).width());

//浏览器当前窗口文档对象宽度 alert($(document.body).width());

//浏览器当前窗口文档body的高度 alert($(document.body).outerWidth(true));

//浏览器当前窗口文档body的总宽度 包括border padding margin

$(document).scroll(function(){

var pics=$(".pics");

var sc=$(document).scrollTop();

$("#float").text(sc);

for(var i=0;i

var pic=pics.eq(i);

var bottom =pic.offset().top+pic.height();

if((sc+$(window).height())>=bottom){

eval( "var word=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"');

var li="

"+word+"

梦里过客笑眼望，望回廊，秋螽藏

";

pic.append(li);

}

}

});

});

这样做基本实现了最简单的一个瀑布流，但是脚本中并没有考虑内存消耗，即无限加载的问题。现在我也没搞懂，以后再完善吧 。

来看效果：