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 相关文章推荐
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
javascript实现拖放效果
Dec 16 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
python requests.post带head和body的实例
2019/01/02 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
小车司机岗位职责
2013/11/25 职场文书
晚宴邀请函范文
2014/01/15 职场文书
给校长的建议书300字
2014/05/16 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
老公婚前保证书
2015/02/28 职场文书
冰雪公主观后感
2015/06/16 职场文书