先看所谓的瀑布流布局

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

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

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

说一下大体思路(也是看了别人的):
一切的不对齐都是从第一行的图片排列开始的，也许不是很准确，那么换一个说法：
要想使图片排列整齐，那么就得从第一行排列开始。
假设第一行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. HDU 4292 Food 最大流

    Food Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. C#的GC机制（来自网摘复制，未整理）

    第一个就是很多人用.Net写程序,会谈到托管这个概念.那么.Net所指的资源托管到底是什么意思,是相对于所有资源,还是只限于某一方面资源?很多人对此不是很了解,其实.Net所指的托管只是针对内存这一个 ...

  3. 【练习】使用接口回调和handler实现数据加载到listview

    代码结构 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  4. js:数据结构笔记4--队列

    队列是一种特殊的列表,数据结构为FIFO: 定义: function Queue() { this.dataStore = []; this.enqueue = enqueue; this.deque ...

  5. Xamarin Anroid开发教程之下载安装Xamarin

    Xamarin Anroid开发教程之下载安装Xamarin Xamarin在过去安装时都会检查系统中是否安装了前面所提供的内容.而后来,Xamarin安装时只提供安装步骤,其它内容都需要读者自己下载 ...

  6. 水题 ZOJ 3875 Lunch Time

    题目传送门 /* 水题:找排序找中间的价格,若有两个,选价格大的: 写的是有点搓:) */ #include <cstdio> #include <iostream> #inc ...

  7. Android基础环境搭建

      1.安装JDK 从官网下载JDK安装, http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151 ...

  8. Robotium Table控件的处理

    HTML代码: <html> <head> <title>Table</title> </head> <body> <ta ...

  9. [leetCode][016] Add Two Numbers

    [题目]: You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  10. [BZOJ 4436][Cerc2015]Kernel Knights

    [Cerc2015]Kernel Knights Time Limit: 2 Sec Memory Limit: 512 MBSubmit: 5 Solved: 4[Submit][Status][D ...