基于Jquery的图片瀑布流实现_html/css_WEB-ITnose

第1步 分析问题：我这边的处理方式是以列为单位。每次滚动条滚到底部，把需要加的新的内容放在高度最小的列。如下图所示

加载后的显示

如果在继续往下滚动。新图片就会在1下边显示，如此类推。

第2步 布局 ：页面整体有一个外层，包含1,2,3(图片列) ,html 代码结构

1 
2     
3     
4     
5 

第3步 样式：

.pictureflow .imglist{    float:left;    margin:5px;    padding:2px 5px;     width:210px;    height:100%;    overflow:hidden;    border:1px solid #cccccc;}.pictureflow .imglist .imgo{    margin:0 auto;    padding-top:5px;}.pictureflow .imglist .imgo img{    width:200px;    border:1px solid #cccccc;    overflow:hidden;}

第3步：js操作：实时计算高度，加载新模块

// 找到高度最小的一个imgo = $(obj).find(".imglist").eq(0);imgo_h = imgo.height();$(obj).find(".imglist").each(function(){    if(imgo_h > $(this).height()){            imgo = $(this);            imgo_h = imgo.height();    }});$(imgo).append(html);

demo代码 http://i.cnblogs.com/Files.aspx