解题思路:

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

加载后的显示

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

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

 <div class="pictureflow">
<div class="imglist"></div>
<div class="imglist"></div>
<div class="imglist"></div>
</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

基于jQuery 的图片瀑布流实现的更多相关文章

  1. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  2. 基于jQuery的简易瀑布流实现

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

  4. jquery制作图片瀑布流点击按钮加载更多内容

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> ...

  5. 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  6. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  7. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  8. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  9. 图片瀑布流,so easy!

    什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...

随机推荐

  1. autoit使用

    autoit下载地址: http://www.autoitx.com/thread-12964-1-1.html?sid=4zMMSb 在autoit的安装目录下有个Au3Info.exe文件,该文件 ...

  2. java基础(十二)常用类总结(二)

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  3. POJ 1159 Palindrome 最长公共子序列的问题

    Description A palindrome is a symmetrical string, that is, a string read identically from left to ri ...

  4. HDOJ 1716 排列2(next_permutation函数)

    Problem Description Ray又对数字的列产生了兴趣: 现有四张卡片,用这四张卡片能排列出很多不同的4位数,要求按从小到大的顺序输出这些4位数. Input 每组数据占一行,代表四张卡 ...

  5. win7 变WIFI热点 & 在线Linux 内核代码

    https://daniel.haxx.se/docs/sshproxy.html netsh wlan set hostednetwork mode=allow ssid=mywifi  key=1 ...

  6. STL之algorithm、numeric、functional

    <algorithm>是所有STL头文件中最大的一个,其中常用到的功能范围涉及到比较.交换.查找.遍历操作.复制.修改.反转.排序.合并等等. <numeric>体积很小,只包 ...

  7. HDU 1502 Regular Words DP+高精度

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1502 题目大意:找出总的满足条件的字符串数,num(a)=num(b)=num(c)且任何前缀均满足n ...

  8. Hibernate环境搭建超详细

    前言 环境搭建其实可以简单到导入相关jar包即可. 但是对于学习来说,这个环境搭建的内容还是挺多的,目的是提供一个让我们如何快速学习和掌握类库的学习环境.作为程序猿,学习和使用类库是必须掌握的技能.如 ...

  9. 浅谈UML中类之间的五种关系及其在代码中的表现形式

    本文转载:http://www.cnblogs.com/DebugLZQ/archive/2013/05/13/3066715.html 什么是类? 将某类东西归纳在一起,可以成为一个类. 类有很多种 ...

  10. c++ 文件写样例

    #include <iostream> #include <sstream> #include <fstream>> using namespace std; ...