> 웹 프론트엔드 > HTML 튜토리얼 > 基于Jquery 的图片瀑布流实现_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:28:19
원래의
838명이 탐색했습니다.

解题思路:

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

加载后的显示

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

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

1 <div class="pictureflow">2     <div class="imglist"></div>3     <div class="imglist"></div>4     <div class="imglist"></div>5 </div>
로그인 후 복사

第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

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿