先看所谓的瀑布流布局

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

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

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

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的，也许不是很准确，那么换一个说法：
要想使图片排列整齐，那么就得从第一行排列开始。
假设第一行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. Spring获取ApplicationContext方式，和读取配置文件获取bean的几种方式

    转自:http://chinazhaokeke.blog.163.com/blog/static/109409055201092811354236  Spring获取ApplicationContex ...

  2. IE8上传文件时文件本地路径变成"C:\fakepath\"的问题

    转自:http://yunzhu.iteye.com/blog/1116893 在使用<input id="file_upl" type="file" / ...

  3. c++ queue 顺序队列的实现

    #include<iostream> #include<cstdlib> #include<cstdio> using namespace std; const i ...

  4. Oracle查询表里的重复数据方法：

    一.背景 一张person表,有id和name的两个字段,id是唯一的不允许重复,id相同则认为是重复的记录. 二.解决 select id from group by id having count ...

  5. Fibonacci Again

    Problem Description There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) ...

  6. BZOJ3289 Mato的文件管理（莫队算法+树状数组）

    题目是区间逆序数查询. 莫队算法..左或右区间向左或右延伸时加或减这个区间小于或大于新数的数的个数,这个个数用树状数组来统计,我用线段树超时了.询问个数和数字个数都记为n,数字范围不确定所以离散化,这 ...

  7. ural 1283. Dwarf

    1283. Dwarf Time limit: 1.0 secondMemory limit: 64 MB Venus dwarfs are rather unpleasant creatures: ...

  8. BZOJ2610 : [Poi2003]Monkeys

    考虑离线,将删边操作倒过来变成加边,等价于询问每个点什么时候与1连通 使用并查集维护,每次合并时如果有一边是1所在连通块,就把另一边的所有点的答案更新 #include<cstdio> # ...

  9. gprof参数说明及常见错误

    参数说明 l -b 不再输出统计图表中每个字段的详细描述. l -p 只输出函数的调用图(Call graph的那部分信息). l -q 只输出函数的时间消耗列表. l -e Name 不再输出函数N ...

  10. TYVJ P1045 &&洛谷 1388 最大的算式 Label:dp

    描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就是N-1个了,所以恰好每两个相邻数字之间都有一个符号.例 ...