先看所谓的瀑布流布局

在不使用瀑布流布局的情况下，当页面要显示不同高度的图片时，会如下面显示

下面的元素总是和最靠近它的元素对齐。

为了使元素能够在我们想要的位置上显示，我们使用绝对定位。

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的，也许不是很准确，那么换一个说法：
要想使图片排列整齐，那么就得从第一行排列开始。
假设第一行x个元素排列中有一个最矮的(假设不假设都一样，假设是为了便于理解)，
较高的元素比这个最矮的要多出一块区域来，那么第二行就要有人去把这个多出来的区域填上
当有人填上后，我们发现第一行最矮元素再加上这个填空白元素，比其他元素都更高了，这时我们把他俩看成一个元素
这样还是只有一行x个元素，然后就循环呗！每次找出最矮的来，让下一行的元素填充

代码如下(图片和reset.css要自己准备)

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="gb2312" />

 <title>瀑布流练习</title>

 <link type="text/css" rel="stylesheet" href="./css/reset.css" />

 <style>

 ul.wrap{

     width:1200px;

     margin:0 auto;

     position:relative; /* 相对定位 */

 }

 ul.wrap li{

     width:400px;

     float:left;

     position:absolute; /* 绝对定位 */

 }

 ul.wrap li img{

     /* 计算好长度 */

     width:364px;

     border:2px solid #bdbdbd;

     padding:10px;

     margin:4px;

 }

 </style>

 <script type="text/javascript">

 window.onload = function(){

     pubuliu("ulwrap",3,400);

 };

 //实现ul下的li瀑布流

 //cols 表示一行几列，liWidth 表示一列的宽度

 function pubuliu(ulId,cols,liWidth){

     var wrap = document.getElementById(ulId);

     var lis = wrap.getElementsByTagName("li");

     var li_h = [];

     for(var i=0; i<lis.length; i++){

         if(i < cols){

             li_h[i] = lis[i].scrollHeight;

             //定位元素

             lis[i].style.left = i * liWidth + "px";

             lis[i].style.top = "0px";

         }else{

             //获取数组最小值

             var min_liH = Math.min.apply( Math, li_h );

             var key = getKeyByValue(li_h,min_liH);

             //重定义最小高度

             li_h[key] = min_liH + lis[i].scrollHeight;

             //定位元素

             lis[i].style.left = key * liWidth + "px";

             lis[i].style.top = min_liH + "px";

         }

     }

 }

 //根据数组中的值获取索引

 function getKeyByValue(arr,value){

     for(var i=0; i<arr.length; i++){

         if(arr[i] == value){

             return i;

         }

     }

 }

 </script>

 </head>

 <body>

     <ul class="wrap clearfix" id="ulwrap">

         <li>

             <img src="./images/1.jpg" />

         </li>

         <li>

             <img src="./images/2.jpg" />

         </li>

         <li>

             <img src="./images/3.jpg" />

         </li>

         <li>

             <img src="./images/4.jpg" />

         </li>

         <li>

             <img src="./images/5.jpg" />

         </li>

         <li>

             <img src="./images/6.jpg" />

         </li>

         <li>

             <img src="./images/7.jpg" />

         </li>

         <li>

             <img src="./images/8.jpg" />

         </li>

         <li>

             <img src="./images/9.jpg" />

         </li>

         <li>

             <img src="./images/10.jpg" />

         </li>

     </ul>

 </body>

 </html>

瀑布流布局分为两部分：css部分和js部分。

css部分负责确定 li 的宽度、一行显示几列和定位方式

js部分负责确定具体的定位坐标

解释一下pubuliu(ulId, cols, liWidth)这个函数。它对 ulId 元素下的子li元素进行瀑布流布局，cols是一行显示几列，liWidth是一列的宽度。

页面瀑布流布局的实现 javascript+css的更多相关文章

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

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

  2. javascript实例学习之五——瀑布流布局

    瀑布流布局的特征: 1,各列的高度参差不齐 2,页面向下滚动时,自动请求和加载新数据 目前,瀑布流布局的主流实现方式有两种: 1,基于浮动,每一列是一个ul,这些ul都向左浮动,这种方法的好处是布局容 ...

  3. 使用jquery+css实现瀑布流布局

    虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下:      思路是通过将每个小块的position设置为relativ ...

  4. 纯css瀑布流布局

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

  5. 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局

    传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...

  6. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  7. 一个尖括号能干什么，画一个笑脸开始（为了支持交互，它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能－－支持更高级的交互和云服务集成。这就是今天的HTML5）

    一个尖括号 < 一个尖括号能干什么 < ? 你可以编出一顶帽子 <(:-p 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互 ...

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

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

  9. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

随机推荐

  1. 【原创】CDM添加新磁盘，然后负载

    hdfs快占满了,所以为节点中添加新的磁盘(这块是个教训,以后用新的节点时,磁盘需要一次性插满,省得后续再添加磁盘了) 注意: 添加磁盘时,不仅仅datanode在配置时添加节点,nodemanage ...

  2. Hark的数据结构与算法练习之桶排序

    算法说明 桶排序的逻辑其实特别好理解,它是一种纯粹的分而治之的排序方法. 举个例子简单说一下大家就知道精髓了. 假如对11,4,2,13,22,24,20 进行排序. 那么,我们将4和2放在一起,将1 ...

  3. Codeforces Round #328 (Div. 2)

    这场CF,准备充足,回寝室洗了澡,睡了一觉,可结果...   水 A - PawnChess 第一次忘记判断相等时A先走算A赢,hack掉.后来才知道自己的代码写错了(摔 for (int i=1; ...

  4. 【BZOJ】1468: Tree（点分治）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1468 分治真是一门高大上的东西... 好神... 树分治最好资料是:qzc的<分治算法在树的路 ...

  5. 【BZOJ】1862: [Zjoi2006]GameZ游戏排名系统 & 1056: [HAOI2008]排名系统（treap+非常小心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1862 http://www.lydsy.com/JudgeOnline/problem.php?id ...

  6. WebRTC手记之本地视频采集

    转载请注明出处:http://www.cnblogs.com/fangkm/p/4374610.html 前面两篇文章介绍WebRTC的运行流程和使用框架接口,接下来就开始分析本地音视频的采集流程.由 ...

  7. java+easyui实例

    1.首先引入easyui包 在jsp页面上引用以下文件: <link rel="stylesheet" type="text/css" href=&quo ...

  8. 4.用文本编辑器输入课堂上练习的Hello.java，并在JDK环境下编译和运行。请将程序编译、运行的结果截图，填入下框中。

    一开始报错是因为在文本框了的:用的是中文下的,应该用英文下的;

  9. Everything文件名实时搜索||解决局域网文件共享问题

    内容概要:Everything中文版下载地址及使用.用Everything轻松解决局域网文件共享问题.Everything语言设置问题 另:Everything只支持NTFS格式的磁盘(工作原理的缘故 ...

  10. sql 语句大小写的问题

    关键字不区分大小写 例如 select ,from, 大小写均可 标识符区分大小写 例如 表名,列名 标识符如果不加双引号,默认是按大写执行 标识符如果加双引号,则是按原始大小写执行 但是,当表名加上 ...