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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
jquery获取tagName再进行判断
May 29 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
如何去掉文章里的 html 语法
2006/10/09 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python操作redis的方法
2015/07/07 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python ellipsis 的用法详解
2020/11/20 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
教育科研先进个人材料
2014/01/26 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年市场部工作总结
2015/04/30 职场文书
荒岛余生观后感
2015/06/09 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
导游词之天津古文化街
2019/11/09 职场文书
redis实现排行榜功能
2021/05/24 Redis
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
python神经网络Xception模型
2022/05/06 Python