jquery实现瀑布流效果

实现瀑布流效果的方法一般有两种：基于CSS3的实现和基于jQuery的实现。下面是一种基于jQuery的实现方法：

1. 确定每个元素的宽度，以便计算列数和每列的宽度：

var itemWidth = $('.item').outerWidth(true);
var columnCount = Math.floor($('.container').width() / itemWidth);
var columnWidth = $('.container').width() / columnCount;

2. 创建一个数组来保存每列的高度，初始值为0：

var columnHeights = [];
for (var i = 0; i < columnCount; i++) {
  columnHeights.push(0);
}

3. 遍历每个元素，找到高度最小的一列，把元素添加到该列，并更新列高度：

$('.item').each(function() {
  var minHeight = Math.min.apply(null, columnHeights);
  var minIndex = $.inArray(minHeight, columnHeights);
  $(this).css({
    'left': minIndex * columnWidth + 'px',
    'top': minHeight + 'px'
  });
  columnHeights[minIndex] += $(this).outerHeight(true);
});

完整代码如下：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  ...
</div>

<script>
$(function() {
  var itemWidth = $('.item').outerWidth(true);
  var columnCount = Math.floor($('.container').width() / itemWidth);
  var columnWidth = $('.container').width() / columnCount;
  var columnHeights = [];
  for (var i = 0; i < columnCount; i++) {
    columnHeights.push(0);
  }
  $('.item').each(function() {
    var minHeight = Math.min.apply(null, columnHeights);
    var minIndex = $.inArray(minHeight, columnHeights);
    $(this).css({
      'left': minIndex * columnWidth + 'px',
      'top': minHeight + 'px'
    });
    columnHeights[minIndex] += $(this).outerHeight(true);
  });
});
</script>

注意：这只是一种基础的瀑布流实现方法，实际应用中还需要考虑一些细节问题，比如图片加载完成后再计算高度、窗口大小变化时重新排列等问题。