zoukankan      html  css  js  c++  java
  • 基于jQuery 的图片瀑布流实现

    解题思路:

    第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;
    }

    第4步:js操作:实时计算高度,加载新模块

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

     有需要的话,完整代码下载地址  瀑布流.zip

    2016-01-27

  • 相关阅读:
    GitHub 实现多人协同提交代码并且权限分组管理
    前端第一篇文章-http标准
    介绍Android电量
    音频编码格式
    PPT
    Word
    HTML 之 JavaScript
    HTML 之 CSS
    HTML 之 HTTP 协议(请求协议以及响应协议)
    HTML 之 标签
  • 原文地址:https://www.cnblogs.com/enemy/p/5162812.html
Copyright © 2011-2022 走看看