基于Jquery的图片瀑布流实现_html/css

来源：动视网责编：小采时间：2020-11-27 16:18:50

基于Jquery的图片瀑布流实现_html/css

基于Jquery的图片瀑布流实现_html/css_WEB-ITnose:解题思路：第1步分析问题：我这边的处理方式是以列为单位。每次滚动条滚到底部，把需要加的新的内容放在高度最小的列。如下图所示加载后的显示如果在继续往下滚动。新图片就会在1下边显示，如此类推。第2步布局：页面整体有一个外层，包含1,2,3

推荐度：

点击下载本文 文档为doc格式

导读基于Jquery的图片瀑布流实现_html/css_WEB-ITnose:解题思路：第1步分析问题：我这边的处理方式是以列为单位。每次滚动条滚到底部，把需要加的新的内容放在高度最小的列。如下图所示加载后的显示如果在继续往下滚动。新图片就会在1下边显示，如此类推。第2步布局：页面整体有一个外层，包含1,2,3

解题思路：

第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

基于Jquery的图片瀑布流实现_html/css

推荐度：

点击下载本文 文档为doc格式

标签：图片的图片实现

热门焦点

基于Jquery的图片瀑布流实现_html/css

基于Jquery的图片瀑布流实现_html/css

基于Jquery的图片瀑布流实现_html/css

最新推荐

猜你喜欢

热门推荐