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

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2016-09-01
这篇文章主要介绍了jQuery实现的瀑布流加载效果,结合实例形式分析了jQuery基于数学运算与事件响应实现页面瀑布流加载的功能,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
  • Python中在脚本中引用其他文件函数的实现方法
    下面小编就为大家带来一篇Python中在脚本中引用其他文件函数的实现方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧在导入文件的时候,Python只搜索当前脚本所在的目录,加载(entry-point)入口脚本运行目录和sys.path中包含的路径例如包的安装地址.所以如果要在当前脚本引用其他文件,除了将文件放在和脚本同一目 ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • 关于IE11修改User-agent不再支持document.all等
    这篇文章主要介绍了关于IE11修改User-agent不再支持document.all等,需要的朋友可以参考下一个新的身份标识关于IE11的第一个新闻就是它有了一个新的用户代理(UA)字符串: Mozilla/5.0 (IE 11.0; Windows NT 6.3; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) lik ...
  • jQuery如何用正则表达式验证手机号、身份证号、中文名称
    这篇文章主要介绍了jQuery如何用正则表达式验证手机号.身份证号.中文名称 的相关资料,需要的朋友可以参考下数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern ...
猜你喜欢