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的仿flash的广告轮播
Nov 05 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
Vue Components 数字键盘的实现
Sep 18 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
通过构造函数实例化对象的方法
2017/06/28 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
express express-session的使用小结
2018/12/12 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
iphone刘海屏页面适配方法
2019/05/07 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
浅谈Python __init__.py的作用
2020/10/28 Python
python接口自动化框架实战
2020/12/23 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
交通安全寄语大全
2014/04/08 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
安全生产标语大全
2014/10/06 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript