先看所谓的瀑布流布局

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

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

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

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的，也许不是很准确，那么换一个说法：
要想使图片排列整齐，那么就得从第一行排列开始。
假设第一行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. struts2框架——从后台取得数据集，并在前台页面循环显示

    1.CourseBean.java public class CourseBean { private String f_courseId = ""; private String ...

  2. loj 1150(spfa预处理+二分+最大匹配)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26864 思路:首先是spfa预处理出每个'G'到'H'的最短距离, ...

  3. WireShark数据包分析数据封装

    WireShark数据包分析数据封装 数据封装(Data Encapsulation)是指将协议数据单元(PDU)封装在一组协议头和尾中的过程.在OSI七层参考模型中,每层主要负责与其它机器上的对等层 ...

  4. LCS(打印路径) POJ 2250 Compromise

    题目传送门 题意:求单词的最长公共子序列,并要求打印路径 分析:LCS 将单词看成一个点,dp[i][j] = dp[i-1][j-1] + 1 (s1[i] == s2[j]), dp[i][j] ...

  5. Open Xml SDK Word模板开发最佳实践(Best Practice)

    1.概述 由于前面的引文已经对Open Xml SDK做了一个简要的介绍. 这次来点实际的——Word模板操作. 从本质上来讲,本文的操作都是基于模板替换思想的,即,我们通过替换Word模板中指定元素 ...

  6. BZOJ3578 : GTY的人类基因组计划2

    关于如何判断一个集合是否出现过: 给每个元素随机一个hash权值,然后xor起来即可 插入删除都只需xor 线段树维护区间有效人数和,以及打标记表示这个区间的集合要全部标记为出现过,并把区间内sum值 ...

  7. splice JavaScript Array 对象

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法 arrayObject.splice(index,howmany,item1, ...

  8. 使用新的AppleID更新Xcode

    为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,而非使用自己账号在AppStore下载的. 这样的安装模式会出现一个问题,更新Xcode时AppStroe会提示让你输入下载该X ...

  9. tableviewcell的这贴状态和传值总结

    01  控制器 1.1 定义一个可变数组存放数据,再定义一个可变数组来记录分组的折叠状态 @property(nonatomic)NSMutableArray *dataArr; //记录所有分组的折 ...

  10. Qt中图像的显示与基本操作

    Qt可显示基本的图像类型,利用QImage.QPxmap类可以实现图像的显示,并且利用类中的方法可以实现图像的基本操作(缩放.旋转). 1. Qt可显示的图像类型 参考Qt的帮助文档,可支持的类型,即 ...