瀑布流js特效

<div class="masonry">
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- 更多item -->
</div>

.masonry {
  display: flex;
  flex-direction: row;
  margin-left: -10px; /* 调整间距 */
  width: auto;
}

.masonry .item {
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  /* 其他样式 */
}

function masonryLayout(container) {
  const items = container.querySelectorAll('.item');
  const columnCount = 4; // 可以根据需要调整列数
  const columns = Array.from({ length: columnCount }, () => []);

  items.forEach((item, index) => {
    const columnIndex = index % columnCount;
    columns[columnIndex].push(item);
  });

  const columnHeights = columns.map(() => 0);
  columns.forEach((columnItems, index) => {
    columnItems.forEach(item => {
      item.style.position = 'absolute';
      item.style.left = `${index * (item.offsetWidth + 20)}px`; // 调整间距
      item.style.top = `${columnHeights[index]}px`;
      columnHeights[index] += item.offsetHeight + 20; // 调整间距
    });
  });

  container.style.height = `${Math.max(...columnHeights)}px`;
}

document.addEventListener('DOMContentLoaded', () => {
  const masonryContainer = document.querySelector('.masonry');
  masonryLayout(masonryContainer);

  window.addEventListener('resize', () => {
    masonryLayout(masonryContainer);
  });
});