jQuery 瀑布流 浮动布局（一）- 延迟 AJAX 加载图片

瀑布流布局介绍

瀑布流布局（Waterfall Flow），又称为瀑布流式设计、瀑布流式布局等，是一种常见的页面布局方式。通过把页面元素摆放在不同的列和不同的位置上，让页面呈现出错落有致、层次分明的效果。瀑布流布局常被用来展示图片、商品等，非常适用于视觉效果要求较高的界面，比如 Pinterest 等网站。

实现瀑布流布局

常见的实现瀑布流布局的方式有两种：

1. 使用 CSS3 的 column 属性
2. 使用 JavaScript 的浮动布局

这里介绍使用 JavaScript 的浮动布局方式，具体实现可以参考 jQuery 瀑布流 浮动布局（一）- 延迟 AJAX 加载图片。

延迟 AJAX 加载图片

在实现瀑布流布局的过程中，我们要处理图片的加载。如果一次性加载所有图片，会导致页面卡顿，影响用户体验。因此，可以使用延迟 AJAX 加载图片的方式：

1. 先加载少量的图片，达到页面的第一屏显示效果
2. 当用户滚动页面时，再通过 AJAX 请求加载剩余的图片

具体实现可以参考如下示例：

function loadMore() {
  // 获取当前页面图片数量
  var imgNum = $('.waterfall-flow img').length;
  // 通过 AJAX 请求加载更多的图片
  $.ajax({
    url: '/getMoreImages',
    type: 'GET',
    data: {
      num: imgNum
    },
    dataType: 'json',
    success: function(data) {
      // 将获取到的图片添加到页面中
      for (var i = 0; i < data.length; i++) {
        var img = $('<img src="' + data[i] + '">');
        $('.waterfall-flow').append(img);
      }
    },
    error: function() {
      alert('加载失败');
    }
  });
}

// 滚动页面时触发加载更多图片
$(window).scroll(function() {
  // 判断是否触底
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    loadMore();
  }
});

瀑布流布局动态计算位置

瀑布流布局的一个重要特点就是图片的位置不固定，需要根据实际情况动态计算。具体实现可以参考如下示例：

function waterfall() {
  // 获取可视区域的宽度
  var windowWidth = $(window).width();
  // 获取一行图片的数量
  var numPerLine = Math.floor(windowWidth / 220);
  // 定义数组用于存储每列的高度
  var colHeight = [];
  for (var i = 0; i < numPerLine; i++) {
    colHeight.push(0);
  }
  // 遍历所有图片
  $('.waterfall-flow img').each(function() {
    var imgWidth = $(this).width();
    // 找到高度最小的列
    var minHeight = Math.min.apply(null, colHeight);
    var minIndex = colHeight.indexOf(minHeight);
    // 计算当前图片的位置
    var left = minIndex * (imgWidth + 20);
    var top = minHeight + 20;
    // 设置图片样式
    $(this).css({left: left + 'px', top: top + 'px', position: 'absolute'});
    // 更新相应列的高度
    colHeight[minIndex] = top + $(this).height();
  });
}

// 页面加载时进行一次布局
$(document).ready(function() {
  waterfall();
});

总结

本文介绍了瀑布流布局的实现方式，并针对图片的加载和位置计算进行了详细讲解。通过学习本文，你可以掌握实现瀑布流布局的原理和方法，为你的网站提升一定的用户体验。