jQuery实现的瀑布流加载效果示例


Posted in Javascript onSeptember 13, 2016

本文实例讲述了jQuery实现的瀑布流加载效果。分享给大家供大家参考,具体如下:

demo.js:

$(function(){
  $('img').load(function(){
    var box = $('.box');
    var boxHeight = {
      leftBox:[],
      centerBox:[],
      rightBox:[]
    }
    for(var i=0;i<box.length;i++){
      var now = i%3;   //now的值为0,1,2
      switch(now){
        case 0:
          box.eq(i).css('left','10px');
          boxHeight.leftBox.push(box.eq(i).height());
          var now2 = Math.floor(i/3);
          if(now2==0){
            box.eq(i).css('top',0);
          }else{
            var total = 0;
            for(var j=0;j<now2;j++){
              total += boxHeight.leftBox[j]+10;
            }
            box.eq(i).css('top',total+'px')
          }
        break;
        case 1:
          box.eq(i).css('left','270px');
          boxHeight.centerBox.push(box.eq(i).height());
          var now2 = Math.floor(i/3);
          if(now2==0){
            box.eq(i).css('top',0);
          }else{
            var total = 0;
            for(var j=0;j<now2;j++){
              total += boxHeight.centerBox[j]+10;
            }
            box.eq(i).css('top',total+'px')
          }
        break;
        case 2:
          box.eq(i).css('left','530px');
          boxHeight.rightBox.push(box.eq(i).height());
          var now2 = Math.floor(i/3);
          if(now2==0){
            box.eq(i).css('top',0);
          }else{
            var total = 0;
            for(var j=0;j<now2;j++){
              total += boxHeight.rightBox[j]+10;
            }
            box.eq(i).css('top',total+'px')
          }
        break;
      }
    }
  });
});

demo.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterFall</title>
<style>
*{
  padding: 0;
  margin: 0;
}
.wrap{
  position: relative;
}
.box{
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
}
.box img{
  width: 250px;
}
</style>
<script src="jquery.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="wrap">
  <div class="box">
    <img src="1.jpg" alt="">
    <p>1111111</p>
  </div>
  <div class="box">
    <img src="2.jpg" alt="">
    <p>22222222</p>
  </div>
  <div class="box">
    <img src="3.jpg" alt="">
    <p>33333333</p>
  </div>
  <div class="box">
    <img src="4.jpg" alt="">
    <p>4444444</p>
  </div>
  <div class="box">
    <img src="5.jpg" alt="">
    <p>55555555</p>
  </div>
  <div class="box">
    <img src="6.jpg" alt="">
    <p>666666666666</p>
  </div>
  <div class="box">
    <img src="7.jpg" alt="">
    <p>77777777</p>
  </div>
  <div class="box">
    <img src="8.jpg" alt="">
    <p>888888888888888</p>
  </div>
  <div class="box">
    <img src="9.jpg" alt="">
    <p>99999999999999</p>
  </div>
</div>
</body>
</html>

效果图如下:

jQuery实现的瀑布流加载效果示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
JS实现页面数据无限加载
Sep 13 #Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 #Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 #Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 #Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 #Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
教师个人剖析材料
2014/02/05 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
2014年食堂工作总结
2014/11/20 职场文书
党校个人总结
2015/03/04 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
教师培训学习心得体会
2016/01/21 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书