CSS布局教程：实现瀑布流布局的最佳方法

<div class="waterfall-container">  <div class="waterfall-item"></div>  <div class="waterfall-item"></div>  <div class="waterfall-item"></div>  <!-- 以此类推，可以根据需要添加更多的子容器 --></div>

.waterfall-container {  max-width: 900px; /* 设置最大宽度 */  margin: 0 auto; /* 居中对齐 */}.waterfall-item {  width: 300px; /* 设置子容器的宽度，可以根据实际需求进行调整 */  margin-bottom: 20px; /* 设置子容器的底部间距，可以根据实际需求进行调整 */  position: relative; /* 设置子容器的定位为相对定位 */}

$(window).on('load', function() {  $('.waterfall-container').each(function() {    var $container = $(this);    var $items = $container.find('.waterfall-item');    var columnCount = Math.floor($container.width() / $items.outerWidth(true));    var columns = [];    for (var i = 0; i < columnCount; i++) {      columns.push(0); // 初始化每一列的高度为0    }    $items.each(function() {      var $item = $(this);      var shortestColumnIndex = 0;      var shortestColumnHeight = columns[0];      for (var i = 0; i < columnCount; i++) {        if (columns[i] < shortestColumnHeight) {          shortestColumnHeight = columns[i];          shortestColumnIndex = i;        }      }      $item.css({        top: shortestColumnHeight,        left: shortestColumnIndex * $items.outerWidth(true)      });      columns[shortestColumnIndex] += $item.outerHeight(true); // 更新最短列的高度    });  });});