jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)

下面是关于利用 jQuery 实现瀑布流布局中延迟 AJAX 加载图片的攻略。

前言

瀑布流布局是一种非常流行的网页排版方式，它能够适应不同尺寸的图片，并且极大地提高了页面浏览的舒适度。本文主要介绍如何在瀑布流布局中，通过 AJAX 延迟加载图片。

实现方式

实现方式主要分为两步：

1. 在 HTML 代码中创建图片容器
2. 通过 AJAX 技术加载图片，并使用绝对定位进行排版

创建图片容器

首先，在 HTML 代码中创建包含每张图片的容器。为了实现瀑布流布局，首先需要设置每列容器的宽度，并将它们设置为 float: left。

<div class="column">
  <div class="item"><img src=""></div>
  <div class="item"><img src=""></div>
  <div class="item"><img src=""></div>
</div>
<div class="column">
  <div class="item"><img src=""></div>
  <div class="item"><img src=""></div>
</div>
<div class="column">
  <div class="item"><img src=""></div>
  <div class="item"><img src=""></div>
</div>

接下来是 CSS 样式，主要是对容器的设置：

.column {
  width: 33%;
  float: left;
}
.item {
  position: relative;
}
.item img {
  display: block;
}

延迟加载图片

接下来是通过 AJAX 技术来加载图片。首先，在页面加载完成后，获取页面的高度和列数，然后开始加载图片。

示例代码1：

$(function() {
  var page = 1;
  var isLoading = false;
  var columns = $('.column');
  var columnCount = columns.length;
  var scrollTop = 0;

  function loadImages() {
    if (isLoading) {
      return;
    }
    isLoading = true;
    $.ajax({
      url: '/data?p=' + page,
      dataType: 'json',
      success: function(data) {
        appendImages(data);
        isLoading = false;
        page++;
      },
      error: function() {
        isLoading = false;
      }
    });
  }

  function appendImages(data) {
    var images = data.images;
    var html = '';
    for (var i = 0, len = images.length; i < len; i++) {
      var html = '<div class="item">';
      html += '<img src="' + images[i] + '">';
      html += '</div>';
      var column = getShortestColumn();
      column.append(html);
    }
    PositionImages();
  }

  function getShortestColumn() {
    var minColumn = columns.eq(0);
    columns.each(function() {
      var height = $(this).height();
      if (height < minColumn.height()) {
        minColumn = $(this);
      }
    });
    return minColumn;
  }

  function PositionImages() {
    $('.item').each(function() {
      var item = $(this);
      item.css({
        left: item.position().left,
        top: getShortestColumn().height(),
        opacity: 1
      });
    });
  }

  $(window).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > scrollTop) {
      var maxHeight = getTallestColumn().height() + $(this).height();
      if ($(document).scrollTop() >= maxHeight) {
        loadImages();
      }
    }
    scrollTop = currentScrollTop;
  });

  function getTallestColumn() {
    var maxColumn = columns.eq(0);
    columns.each(function() {
      var height = $(this).height();
      if (height > maxColumn.height()) {
        maxColumn = $(this);
      }
    });
    return maxColumn;
  }

  loadImages(); // 页面刚加载完时，需要立即加载第一次数据
});

如上所示，在页面滚动到底部时，会触发加载图片的函数。在此之前，需要进行一些判断，以避免重复加载。

图片如何布局

在 AJAX 加载完成后，需要排列图片。由于图片的加载顺序是不定的，所以需要判断每列容器的高度，将新加载的图片添加到高度最短的列中。

示例代码2：

function appendImages(data) {
  var images = data.images;
  var html = '';
  for (var i = 0, len = images.length; i < len; i++) {
    var html = '<div class="item">';
    html += '<img src="' + images[i] + '">';
    html += '</div>';
    var column = getShortestColumn();
    column.append(html);
  }
  PositionImages();
}

function getShortestColumn() {
  var minColumn = columns.eq(0);
  columns.each(function() {
    var height = $(this).height();
    if (height < minColumn.height()) {
      minColumn = $(this);
    }
  });
  return minColumn;
}

function PositionImages() {
  $('.item').each(function() {
    var item = $(this);
    item.css({
      left: item.position().left,
      top: getShortestColumn().height(),
      opacity: 1
    });
  });
}

然后，使用绝对定位对图片进行定位。这里需要注意，由于图片是延迟加载的，如果遇到图片未加载完成就进行布局，会导致元素的位置出现偏差。因此需要特别关注图片的加载状态。

使用 opacity 属性为 0，等到图片加载成功后再将其设置蒋 1。

.item {
  position: absolute;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.item.loaded {
  opacity: 1;
}

同时在 JS 代码中，将图片加载成功的状态写入图片容器中：

function appendImages(data) {
  var images = data.images;
  var html = '';
  for (var i = 0, len = images.length; i < len; i++) {
    var html = '<div class="item">';
    html += '<img src="' + images[i] + '">';
    html += '</div>';
    var column = getShortestColumn();
    column.append(html);
  }
  PositionImages();
}

function PositionImages() {
  $('.item').each(function() {
    var item = $(this);
    item.css({
      left: item.position().left,
      top: getShortestColumn().height(),
    });
    item.one('load', function() {
      item.addClass('loaded');
    });
  });
}

至此，就完成了基于 jQuery 瀑布流绝对定位布局的延迟 AJAX 加载图片攻略的讲解。