测试环境：ie8 ff13.0.1  chrome22

可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>waterfall flow</title>
  7. <script type="text/javascript" src="../jquery-1.8.0.min.js" /></script>
  8. <style type="text/css" >
  9. body{margin:0px;}
  10. #main{width:840px;margin:0 auto;}
  11. .flow{float:left;width:200px;margin:5px;background:#ABC;}
  12. </style>
  13. <script type="text/javascript" >
  14. $(document).ready(function(){
  15. // 初始化内容
  16. for(var i = 0 ; i < 3 ; i++){
  17. $(".flow").each(function(){
  18. $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
  19. });
  20. }
  21. $(window).scroll(function(){
  22. // 被卷去的高度
  23. var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
  24. // 页面高度
  25. var pageHeight = $(document).height();
  26. // 可视区域高度
  27. var viewHeight = $(window).height();
  28. //alert(viewHeight);
  29. //当滚动到底部时
  30. if((scrollTop+viewHeight)>(pageHeight-20)){
  31. if(scrollTop<1000){//防止无限制的增长
  32. for(var i = 0 ; i < 2 ; i++){
  33. $(".flow").each(function(){
  34. $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
  35. });
  36. }
  37. }
  38. }
  39. });
  40. });
  41. /*
  42. * 获取指定范围随机数
  43. * @param min，最小取值
  44. * @param max，最大取值
  45. */
  46. function getRandom(min,max){
  47. //x上限，y下限
  48. var x = max;
  49. var y = min;
  50. if(x<y){
  51. x=min;
  52. y=max;
  53. }
  54. var rand = parseInt(Math.random() * (x - y + 1) + y);
  55. return rand;
  56. }
  57. </script>
  58. </head>
  59. <body>
  60. <div id="main">
  61. <div class="flow" ></div>
  62. <div class="flow" ></div>
  63. <div class="flow" ></div>
  64. <div class="flow" ></div>
  65. </div>
  66. </body>
  67. </html>

jquery实现简单瀑布流代码的更多相关文章

  1. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  2. jquery实现简单瀑布流

    瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满 ...

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

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

  4. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  5. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  6. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

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

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

  8. iOS之简单瀑布流的实现

    iOS之简单瀑布流的实现   前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里. 实现思路 collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie ...

  9. jquery插件实现瀑布流

    jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

随机推荐

  1. Unix环境高级编程(二十)伪终端

    1.综述 伪终端对于一个应用程序而言,看上去像一个终端,但事实上伪终端并不是一个真正的终端.从内核角度看,伪终端看起来像一个双向管道,而事实上Solaris的伪终端就是用STREAMS构建的.伪终端总 ...

  2. OC 中new与alloc/init的差别

    英文具体解释:http://macresearch.org/difference-between-alloc-init-and-new 1.在实际开发中非常少会用到new.一般创建对象咱们看到的全是[ ...

  3. android侧滑效果，SlidingMenu配置

    最近开始做点东西,需要用到android activity侧滑的效果.感觉配置起来还是有点小麻烦,总结一下以便回顾. 需要的东西: 1.SlidingMenu项目:点击打开链接 2.ActionBar ...

  4. 17monipdb根据IP获得区域

    https://www.ipip.net/download.html https://github.com/17mon/csharp IpAndPositionHelper public class ...

  5. C 指针使用误区

    /** *错误给指针赋常量 *知识点:指针存储内存地址 **/ #include <stdio.h>void main(){ //int *p_int = 123; //错误,不能直接给指 ...

  6. mysqldump 备份某张表 Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions,

    [root@NB ok]# mysqldump -uemove -h xx.xx.xx.xx -P9906 DBname t_name -p >2t_tname.sqlWarning: A pa ...

  7. eclipse中maven项目部署到tomcat [转]

    其实maven项目部署到tomcat的方式很多,我从一开始的打war包到tomcat/webapps目录,到使用tomcat-maven插件,到直接使用servers部署,一路来走过很多弯路. 下面就 ...

  8. angular学习笔记(二)-创建angular模块

    如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DO ...

  9. vim学习日志（5）：vim下wimrc的配置，解决中文乱码问题

    解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: ,ucs-bom,gb18030,gbk,gb231 ...

  10. ny104 最大和

    最大和 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描述 给定一个由整数组成二维矩阵(r*c),现在需要找出它的一个子矩阵,使得这个子矩阵内的所有元素之和最大,并把这个子矩 ...