AJAX——瀑布流布局

瀑布流案例

封装jQuery瀑布流插件

//特点分析：
//1. 跟以前的瀑布流不一样的是，这次的瀑布流固定版心为1200px
//2. 瀑布流固定摆放5列，每一列的宽度固定为232px。

//思路分析：
//1. 计算每一列之间的缝隙
//2. 初始化一个数组，用户存储每一列的高度 [0,0,0,0,0]
//3. 查找数组的最小列，每次都把图片定位到最小列的位置
//4. 更新数组最小列的高度（加上定位过来的图片的高度）

 

代码参考：

jquery.waterfall.js

// 瀑布流具体实现
// 1. 获取父盒子和子盒子, 获取父盒子和子盒子的宽度
// 2. 计算间隙
// 3. 遍历子盒子, 进行设置位置 left, top
//    (1) 第一行
//    (2) 第一行以外的盒子

// jQuery 插件实现
// 给 jQuery 原型添加了一个方法
$.fn.waterFall = function() {
  // this 就是一个 jQuery 对象
  var $box = this; // 父盒子
  var $items = $box.children(); // 所有子盒子
  var boxWidth = $box.width(); // 父盒子的宽度
  var itemWidth = $items.width(); // 获取子盒子的宽度, 返回第一个盒子的宽度
  // 设定 5 列
  var columns = 5;
  // 计算间隙 = (父盒子的宽度 - 子盒子的宽度 * 列数) / (列数 - 1)
  var space = (boxWidth - itemWidth * columns) / (columns - 1);
  // 准备一个数组, 专门用于存放每一列的高度
  var arr = [ 0, 0, 0, 0, 0 ];
  // 遍历子盒子, 设置 left 和 top
  $items.each(function( index, ele