测试环境：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. Orm框架开发之NewExpression合并问题

    之前都是看别人写博客,自己没有写博客的习惯.在工作的过程中,总是会碰到许多的技术问题.有很多时候想记录下来,后面一直有许多的问题等着解决.总想着等系统完成了,再回头总结下.往往结果就把这事抛到脑后了. ...

  2. xapp1052之dma_test.v

    dma_test是针对dma硬件设计的仿真测试文件,文件包括DMA写数据测试,DMA读数据测试以及DMA读写数据测试.这个测试文件其实就是模拟pc的应用程序对fpga设备进行DMA读写. DMA写测试 ...

  3. 【Android】3.6 地图基本控制方法

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 文件名:Demo05MapControl.cs 简介:介绍平移和缩放地图,双指操作地图,监听地图点击 ...

  4. HDU 4952 Poor Mitsui（贪心)

    HDU 4957 Poor Mitsui pid=4957" style="">题目链接 思路:利用相邻交换法去贪心就可以.注意容积为0的情况,这是个坑点 代码: ...

  5. Effective JavaScript Item 46 优先使用数组而不是Object类型来表示有顺序的集合

    本系列作为Effective JavaScript的读书笔记. ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 可是在使用for..in循环对Objec ...

  6. android 开发 ------- 接口文档 规范

    1 接口书写的格式: 1   用例图 2   流程图 3   详细的接口: 3.1请求的方式: 包含:   server地址 le.gxjinan.com/open/user.php?ac=login ...

  7. Winform文件夹图片批量压缩整理修改

    效果图: 窗体设计器生成的代码: namespace ImageCompact { partial class MainForm { /// <summary> /// 必需的设计器变量. ...

  8. UTF8字符串在lua的截取和字数统计【转载】

    转载自:GitHub:pangliang/pangliang.github.com 需求 按字面个数来截取 函数(字符串, 开始位置, 截取长度) utf8sub(,) = 好1世界哈 utf8sub ...

  9. ARM GNU常用汇编语言介绍

    ARM GNU常用汇编语言介绍 ARM汇编语言源程序语句,一般由指令,伪操作,宏指令和伪指令组成. ARM汇编语言的设计基础是汇编伪指令,汇编伪操作和宏指令. 伪操作,是ARM汇编语言程序里的一些特殊 ...

  10. 【转】Java对日期Date类进行加减运算，年份加减，月份加减

    import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date; public class Date ...