jquery 瀑布流

jQuery 瀑布流实现方法

瀑布流是一种常见的网页布局方式，特点是元素宽度固定，高度不一，按顺序排列时会自动填充最短的列。以下是使用 jQuery 实现瀑布流的方法。

基本结构

HTML 结构通常包含一个容器和多个子元素：

<div class="waterfall-container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <!-- 更多子元素 -->
</div>

CSS 需要设置容器和子元素的样式：

.waterfall-container {
  position: relative;
  width: 100%;
}
.item {
  position: absolute;
  width: 200px; /* 固定宽度 */
  margin: 10px;
}

jQuery 实现逻辑

加载 jQuery 后，通过计算元素位置实现瀑布流：

$(function() {
  var container = $('.waterfall-container');
  var items = $('.item');
  var columnCount = Math.floor(container.width() / (items.outerWidth(true)));
  var columnHeights = Array(columnCount).fill(0);

  items.each(function() {
    var minHeight = Math.min.apply(null, columnHeights);
    var columnIndex = columnHeights.indexOf(minHeight);

    $(this).css({
      left: columnIndex * $(this).outerWidth(true),
      top: minHeight
    });

    columnHeights[columnIndex] += $(this).outerHeight(true);
  });

  container.height(Math.max.apply(null, columnHeights));
});

响应式处理

窗口大小变化时需要重新计算布局：

$(window).resize(function() {
  var container = $('.waterfall-container');
  var items = $('.item');
  items.css({ top: 0, left: 0 });

  var columnCount = Math.floor(container.width() / (items.outerWidth(true)));
  var columnHeights = Array(columnCount).fill(0);

  items.each(function() {
    var minHeight = Math.min.apply(null, columnHeights);
    var columnIndex = columnHeights.indexOf(minHeight);

    $(this).css({
      left: columnIndex * $(this).outerWidth(true),
      top: minHeight
    });

    columnHeights[columnIndex] += $(this).outerHeight(true);
  });

  container.height(Math.max.apply(null, columnHeights));
});

动态加载更多内容

滚动到底部时加载新内容并重新布局：

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
    // 加载新内容
    $.ajax({
      url: 'load-more.php',
      success: function(data) {
        $('.waterfall-container').append(data);
        // 重新布局
        $(window).trigger('resize');
      }
    });
  }
});

优化建议

使用防抖技术减少 resize 事件的触发频率：

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    // 重新布局代码
  }, 250);
});

考虑使用 CSS3 的 column 属性作为备用方案，虽然无法实现严格的从左到右排列：

.waterfall-container {
  column-count: 3;
  column-gap: 10px;
}
.item {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  break-inside: avoid;
}

注意事项

确保所有图片加载完成后再计算布局，否则高度计算会不准确：

$(window).on('load', function() {
  // 布局代码
});

对于大量元素，可以考虑分批加载和渲染以提高性能。现代浏览器中，CSS Grid 或 Flexbox 也可以实现类似效果，但 jQuery 方案兼容性更好。