参考刘晓帆大神的瀑布流效果 自己也写了个 希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！

html代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  5. <script src="script.js"></script>
  6. <link rel="stylesheet" href="style.css" />
  7. </head>
  8. <body>
  9. <div class="z-box">
  10.     <ul>
  11.         <li>
  12.             <h3>1A</h3>
  13.             <a>aa</a>
  14.             <a>aa</a>
  15.             <a>aa</a>
  16.         </li>
  17.         <li>
  18.             <h3>2B</h3>
  19.             <a>bb</a>
  20.         </li>
  21.         <li>
  22.             <h3>3C</h3>
  23.             <a>cc</a>
  24.             <a>cc</a>
  25.             <a>cc</a>
  26.             <a>cc</a>
  27.         </li>
  28.         <li>
  29.             <h3>4D</h3>
  30.             <a>dd</a>
  31.             <a>dd</a>
  32.             <a>dd</a>
  33.             <a>dd</a>
  34.             <a>dd</a>
  35.             <a>dd</a>
  36.             <a>dd</a>
  37.         </li>
  38.         <li>
  39.             <h3>5E</h3>
  40.             <a>ee</a>
  41.             <a>ee</a>
  42.             <a>ee</a>
  43.             <a>ee</a>
  44.             <a>ee</a>
  45.         </li>
  46.         <li>
  47.             <h3>6F</h3>
  48.             <a>ff</a>
  49.             <a>ff</a>
  50.             <a>ff</a>
  51.         </li>
  52.         <li>
  53.             <h3>7G</h3>
  54.             <a>GG</a>
  55.             <a>GG</a>
  56.             <a>GG</a>
  57.         </li>
  58.         <li>
  59.             <h3>8E</h3>
  60.             <a>ee</a>
  61.             <a>ee</a>
  62.             <a>ee</a>
  63.             <a>ee</a>
  64.             <a>ee</a>
  65.         </li>
  66.         <li>
  67.             <h3>9F</h3>
  68.             <a>ff</a>
  69.             <a>ff</a>
  70.             <a>ff</a>
  71.         </li>
  72.         <li>
  73.             <h3>10G</h3>
  74.             <a>GG</a>
  75.             <a>GG</a>
  76.             <a>GG</a>
  77.         </li>
  78.     </ul>
  79. </div>
  80. </body>
  81. </html>

css代码：

  1. *{
  2.     margin:0px;
  3.     padding:0px;
  4.     font-size:12px;
  5. }
  6. body{
  7.     background:pink;
  8. }
  9. li{
  10.     list-style:none;
  11. }
  12. .z-box{
  13.     width:300px;
  14.     height:auto;
  15.     box-shadow:0px 0px 1px red;
  16.     margin:0 auto;
  17.     position:relative;
  18. }
  19. .z-box ul{
  20.  
  21. }
  22. .z-box ul li{
  23.     width:44px;
  24.     text-align:center;
  25.     position:absolute;
  26.     background:#f3f3f3;
  27.     top:0px;
  28.     left:40%;
  29.     transition:all 0.5s;
  30.     -webkit-transition:all 0.5s;
  31.     -o-transition:all 0.5s;
  32.     -ms-transition:all 0.5s;
  33.     -moz-transition:all 0.5s;
  34.  
  35. }
  36. .z-box ul li a{
  37.     display:block;
  38.     width:44px;
  39.  
  40. }

javascript代码：

  1. $(function(){
  2.  
  3.     var $oLi=$(".z-box > ul li");    //jq对象
  4.     var dWidth=$(".z-box").outerWidth();
  5.     var lWidth=$oLi.outerWidth()+5;    //li的宽度+间距
  6.     var col=Math.round(dWidth/(lWidth+10));    //列数+间距
  7.     console.log(col);
  8.  
  9.     var array=[];    //存放列坐标的数组
  10.  
  11.     for(var i=0;i<col;i++){
  12.         array.push([i*lWidth,0]);    //初始化列的坐标
  13.     }
  14.  
  15.     $oLi.each(function(){    //遍历每一个单位
  16.  
  17.         var _temp=0;    //最低列暂存体
  18.         var _height=$(this).outerHeight();    //获取当前单位的高度
  19.  
  20.         for(var j=0;j<col;j++){
  21.             if(array[j][1]<array[_temp][1]){
  22.                 _temp=j;    //比较哪列是最低索引
  23.             }
  24.         }
  25.  
  26.         $(this).css({"left":array[_temp][0]+"px","top":array[_temp][1]+"px"});    //设置单位的坐标
  27.         array[_temp][1] = array[_temp][1] + _height+5;    //计算列的最低坐标
  28.  
  29.     });    
  30.  
  31.     //获取最高top
  32.     var nLi=[],
  33.         n=0,
  34.           max=0,
  35.         nHeight;
  36.     for(var i=0;i<col;i++){
  37.         if(array[i][1]>array[n][1]){
  38.             n=i;
  39.             max=array[i][1]-5;
  40.         }
  41.     }
  42.  
  43.     for(var j=0;j<col;j++){
  44.         if(array[j][1]>array[n][1]){
  45.             n=j;
  46.             $(".z-box").css("height",array[j][1]-5+"px");
  47.             console.log("min="+j);
  48.  
  49.         }else{
  50.             nHeight=max-array[j][1];
  51.             nLi[j]=document.createElement("li");
  52.             $(nLi[j]).css("height",nHeight);
  53.             $(nLi[j]).css({"left":array[j][0]+"px","top":array[j][1]+"px"});
  54.             $(".z-box > ul").append(nLi[j]);
  55.             console.log("max="+j);
  56.         }
  57.     }
  58. });

瀑布流布局(jq实现)的更多相关文章

  1. 纯css瀑布流布局

    由于公司的项目需要才用到瀑布流布局 因为后台返回的json直接循环出来的,所以不能做左右浮动的那种,所以才用到了瀑布流布局 16年之前的瀑布流布局基本都时基于js或者直接用jq插件的,但是随着技术的进 ...

  2. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  3. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  4. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. JavaScript——基本的瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  8. flexbox实现不等宽不等高的瀑布流布局

    第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...

  9. 通过Measure & Arrange实现UWP瀑布流布局

    简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...

随机推荐

  1. server and client

    server: using System;using System.Collections.Generic;using System.Linq;using System.Text;using Syst ...

  2. 执行最慢的SQL语句

    ---执行最慢的SQL语句SELECT top 20(total_elapsed_time / execution_count)/1000 N'平均时间ms',total_elapsed_time/1 ...

  3. mybatis3.2.3+spring3 控制台打印sql解决办法

    学习mybatis的时候遇到打印不出sql 的问题,在这里做个总结: 1:首先log4j.properties这样配置: log4j.rootLogger=DEBUG,console,R log4j. ...

  4. 面试复习（C++）之归并排序

    #include <iostream> #include<stdlib.h>//引入malloc using namespace std; void Merge(int *a, ...

  5. 编程key note

    一些日常发现的code better的要点.不断更新. * #include <assert.h> 使用断言* 每个模块(文件)应该有一个唯一的一个前缀,模块导出的所有全局名字都应以此前缀 ...

  6. MicroERP更新记录2.2：增加B/S查询功能

    提供电脑版及手机版两种浏览方式,仅仅作为一个DEMO展示,由于系统内置报表比较复杂,待广泛收集用户需求之后再逐步完善. 网页文件在安装包内web文件夹中. 下载地址:60.2.39.130/micro ...

  7. OC基础--Property

    编译器指令: 用来告诉编译器要做什么 @property: @property是编译器的指令 告诉编译器在@interface中自动生成setter和getter的声明 @synthesize: @s ...

  8. Jupyter Notebook 27绝技——27 Jupyter Notebook tips, tricks and shortcuts

    转载自:https://www.dataquest.io/blog/jupyter-notebook-tips-tricks-shortcuts/ Jupyter notebook, formerly ...

  9. CentOS 6.6编译安装Nginx1.6.2+MySQL5.6.21+PHP5.6.3

    http://www.osyunwei.com/archives/8867.html 一.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables #编辑防火墙配置 ...

  10. Error Domain=ASIHTTPRequestErrorDomain Code=8 "Failed to move file from"xxx/xxx"to"xxx/xxx"

    今天真的好高兴呀 我解决了一个折磨了我一周的问题,真的是激动地要哭出来了,为了这个问题,我嘴也烂了,头发抓了一地啊.虽然解决方法,最后还是展现出了“百度”的伟大,但是我还是很开心,在这里我展示一下我的 ...