详解网页中的瀑布流显示效果

网页实现瀑布流显示效果

本网页基于JQuery框架。

瀑布流是什么？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。——摘自百度百科“瀑布流”

瀑布流布局的几个特征：
1. 单元格宽固定，高不固定。
2. 每单元格从左到右依次排列，当第一行排满后，剩余的单元格依次排在当前最短的列后。

---

单元格为什么可以高低错落地显示？

主要运用了元素的绝对定位，而如何正确的将不同元素定位在各自的位置，就是实现瀑布流的关键。

---

如何实现？

先简单的搭建网页布局，这里只需写一个单元格的代码，后续会在js中添加剩余的单元格。
单元格的内容自定，这里作为一个简单的demo仅插入一张图片，图片路径同样后续在js中添加 。

<div id="wf">
    <div class="unit">
        <img />
    </div>
</div>

设置页面的CSS样式。

*{
    padding: 0;
    margin: 0;
}
#wf{
    margin-top: 50px;
    //将外层div设为相对定位，单元格才会相对于外层进行绝对定位
    position: relative; 
}
#wf .unit{
    position: absolute;
    border: 1px solid black;
}
#wf .unit img{
    //因下js中单元格宽度设为250px，故此将图片设为230px
    width: 230px;
    //四周各设10px内边距
    padding: 10px;
}

以上完成了HTML和CSS的编写，接下来是js对于功能的实现。

• 设定几个全局变量
  这些全局变量在接下来的编码过程中会用到，变量值可根据个人偏好酌情设置。

//单元格宽度
var unit_wid = 250;
//单元格间距
var unit_edge = 30;
//瀑布流整体大致占比
var unit_rate = 0.8;
//插入单元格个数（原HTML中已设一个，故实际个数再+1）
var unit_num = 9;

• 添加其余的单元格到HTML中。

//该方法需在DOM加载完成后立即执行
function set_unit(){
   
    for (var i = 0;i < unit_num;i++){
        var temp = '<div class="unit"><img /></div>';
        $('#wf').append(temp);
    }
}

• 为每个单元格设置图片路径。

//该方法需在set_unit()方法完成后执行
function set_img () {
   
    var img = $('#wf .unit img');
    for (var i = 0;i < img.length;i++){
        img.eq(i).attr('src','images/' + (i+1) + '.jpg');
    }
}

• 对瀑布流整体居中布局。
  1). 确定整个瀑布流的页面大致占比；
  2). 根据瀑布流整体宽度计算可容纳的单元格列数；
  3). 计算出瀑布流整体左右外边距，使其居中显示。

var wf_wid = $(window).width() * 0.8;
var num = Math.floor(wf_wid / unit_wid);
//整体宽度包含num个单元格宽及num-1个间距
var wf_edge = ($(window).width() - (unit_wid * num + unit_edge * (num - 1))) / 2;