jquery实现简单瀑布流代码
2024-10-20 08:25:16
测试环境:ie8 ff13.0.1 chrome22
可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>waterfall flow</title>
- <script type="text/javascript" src="../jquery-1.8.0.min.js" /></script>
- <style type="text/css" >
- body{margin:0px;}
- #main{width:840px;margin:0 auto;}
- .flow{float:left;width:200px;margin:5px;background:#ABC;}
- </style>
- <script type="text/javascript" >
- $(document).ready(function(){
- // 初始化内容
- for(var i = 0 ; i < 3 ; i++){
- $(".flow").each(function(){
- $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
- });
- }
- $(window).scroll(function(){
- // 被卷去的高度
- var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
- // 页面高度
- var pageHeight = $(document).height();
- // 可视区域高度
- var viewHeight = $(window).height();
- //alert(viewHeight);
- //当滚动到底部时
- if((scrollTop+viewHeight)>(pageHeight-20)){
- if(scrollTop<1000){//防止无限制的增长
- for(var i = 0 ; i < 2 ; i++){
- $(".flow").each(function(){
- $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
- });
- }
- }
- }
- });
- });
- /*
- * 获取指定范围随机数
- * @param min,最小取值
- * @param max,最大取值
- */
- function getRandom(min,max){
- //x上限,y下限
- var x = max;
- var y = min;
- if(x<y){
- x=min;
- y=max;
- }
- var rand = parseInt(Math.random() * (x - y + 1) + y);
- return rand;
- }
- </script>
- </head>
- <body>
- <div id="main">
- <div class="flow" ></div>
- <div class="flow" ></div>
- <div class="flow" ></div>
- <div class="flow" ></div>
- </div>
- </body>
- </html>
最新文章
- [AR+Vuforia]学习笔记
- Discuz开源论坛本地部署自动生成数据库
- javaWeb中servlet开发——监听器
- 坐标随鼠标移动 jquery简易版
- ipv4头部分析,读书笔记3
- mysql时间int日期转换
- 强制修改mysql 中root的密码
- (转)深度学习word2vec笔记之基础篇
- [工具]Microsoft To-Do,简约还是简陋?
- 安装 WordPress 时一些常见问题
- C# Net MVC 大文件下载几种方式、支持速度限制、资源占用小
- The 16th Zhejiang Provincial Collegiate Programming Contest Sponsored E.Sequence in the Pocket(思维题)
- Handler Timer TimerTask ScheduledExecutor 循环任务解析
- 让WeuiPicker隐藏日期中的日,只保留年月
- Ruby零碎笔记
- JVM总结(二):垃圾回收器
- 通过COM组件方式实现java调用C#写的DLL文件 转
- MySQL索引失效的几种情况
- [前端] 记录工作中遇到的各种问题(Bug,总结,记录)
- xe5 android 调用照相机获取拍的照片[转]
热门文章
- mac下安装mysql 1820 重置默认密码
- Android 布局之LinearLayout 子控件weight权重的作用详析
- Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动
- activity 概念认知
- Qt Quick + OpenGL + Bullet初次測试
- 告诉你38个MySQL数据库的小技巧
- Golang学习途径总结
- SVN开启端口监听,并设置开机启动
- multi-mechanize error: can not find test script: v_user.py问题
- 解决libstdc++.so.5问题