基于Jquery 的图片瀑布流实现_html/css_WEB-ITnose
程序员文章站
2022-05-10 08:34:38
...
解题思路:
第1步 分析问题:我这边的处理方式是以列为单位。每次滚动条滚到底部,把需要加的新的内容放在高度最小的列。如下图所示
加载后的显示
如果在继续往下滚动。新图片就会在1下边显示,如此类推。
第2步 布局 :页面整体有一个外层,包含1,2,3(图片列) ,html 代码结构
12 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
推荐阅读
-
基于CSS3淡入淡出效果的图片轮播_html/css_WEB-ITnose
-
图片横向等高瀑布流,每行占满,限制行数 的实现
-
《DOM编程艺术》中初步实现的图片库的总结(一)_html/css_WEB-ITnose
-
jQuery向下滚动即时加载内容实现的瀑布流效果_PHP
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
基于JQuery实现的图片自动进行缩放和裁剪处理_jquery
-
IE8下jQuery改变png图片透明度时出现的黑边问题_html/css_WEB-ITnose
-
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
-
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
-
基于jquery的手风琴图片展示效果实现方法