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, element ) { 
    // 遍历数组, 求最小列和最小列索引
    var min = arr[0];
    var minIndex = 0;
    for ( var i = 0; i < arr.length; i++ ) {
      if ( min > arr[i] ) {
        min = arr[i];  // 更新最小列
        minIndex = i; // 更新索引
      }
    }
    // 设置盒子的位置, 设置 left 和 top
    $(this).css({
      left: minIndex * ( itemWidth + space ),
      top: min + space
    });
    // 设置完盒子的位置后, 需要更新最小列
    arr[ minIndex ] = min + space + $(this).height();
  });
  // 给父盒子设置高度, 求数组最大值
  var maxHeight = Math.max.apply( null, arr );
  $box.height( maxHeight ); 
}

瀑布流完整版

//需求分析：
//1. 页面刚开始，没有任何一张图片。因此需要从通过ajax获取图片
//2. 使用模版引擎将获取到的数据渲染到页面
//3. 因为图片路径是从服务端获取的，加载需要时间，需要等待图片加载完成后才能使用瀑布流进行布局。
//4. 给window注册scroll事件，当触底时，需要动态的加载图片。
//5. 加载时，显示加载中的提示信息，并且要求不能重复发送ajax请求
//6. 当服务端返回图片数量为0时，提示用户没有更多数据。

接口文档

//接口说明：瀑布流分页数据
//接口地址：data.php
//请求方式：get
//接口参数：page 当前是第几页    pageSize 当前页需要显示多少条
//返回类型  json
//返回数据：
{
  page: 2,
  items:[
    {path: "./images/1.jpg",text:'这是描述信息'},
    {path: "./images/2.jpg",text:'这是描述信息'}
    {path: "./images/2.jpg",text:'这是描述信息'}
  ]
}
	//page   下一页的页码
	//items  返回当前页的数据
    //path 图片地址
    //text 文字

代码实现：

	

		
	

加载更多

$page, 'items'=>$result));/*｛items:[]｝*/

	sleep(1);
?>