先看所谓的瀑布流布局

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

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

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

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的，也许不是很准确，那么换一个说法：
要想使图片排列整齐，那么就得从第一行排列开始。
假设第一行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. SAE java应用读写文件（TmpFS和Storage）-----绝世好代码

    近期不少java用户都在提sae读写本地文件的问题,在这里结合TmpFS和Storage服务说说java应用应该如何读写文件TmpFS是一个供应用临时读写的路径,但请求过后将被销毁.出于安全考虑,sa ...

  2. Sql语句里的递归查询（转）

    原文摘自:http://blog.csdn.net/pdn2000/article/details/6674243 Sql语句里的递归查询 SqlServer2005和Oracle 两个版本 以前使用 ...

  3. codevs 2924 数独

     数独挑战 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codevs.cn/problem/2924/ Description “芬兰数学家因 ...

  4. 电赛总结（四）——波形发生芯片总结之AD9854

    一.特性参数 ·300M内部时钟频率 ·可进行频移键控(FSK),二元相移键控(BPSK),相移键控(PSK),脉冲调频(CHIRP),振幅调制(AM)操作 ·正交的双通道12位D/A转换器 ·超高速 ...

  5. Spring工具类：WebApplicationContextUtils

    当 Web 应用集成 Spring 容器后,代表 Spring 容器的WebApplicationContext对象将以 WebApplicationContext.ROOT_WEB_APPLICAT ...

  6. 使用java自带的定时任务ScheduledThreadPoolExecutor

    ScheduledThreadPoolExecutor是ThreadPoolExecutor的子类: JDK api里是这么说的: ThreadPoolExecutor,它可另行安排在给定的延迟后运行 ...

  7. Spring的qualifier标签

    @Autowired是根据类型进行自动装配的.如果当Spring上下文中存在不止一个UserDao类型的bean时,就会抛出BeanCreationException异常;如果Spring上下文中不存 ...

  8. LCS(打印全路径) POJ 2264 Advanced Fruits

    题目传送门 题意:两个字符串结合起来,公共的字符只输出一次 分析:LCS,记录每个字符的路径 代码: /* LCS(记录路径)模板题: 用递归打印路径:) */ #include <cstdio ...

  9. POJ1155 TELE（树形DP）

    题目是说给一棵树,叶子结点有负权,边有正权,问最多能选多少个叶子结点,使从叶子到根的权值和小于等于0. 考虑数据规模表示出状态:dp[u][k]表示在u结点为根的子树中选择k个叶子结点的最小权值 最后 ...

  10. 一份spring配置文件及其详解

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/axu20/archive/2009/10/14/4668188.aspx 1.基本配置:<?xml versio ...