html5 瀑布流实现代码

前言

瀑布流是一种常见的网页布局方式，可实现图片或其他内容的动态排列，类似瀑布流下落的效果。在 HTML5 中，我们可以使用 CSS 和 JavaScript 来实现瀑布流的效果。

实现代码

<div id="waterfall" class="clearfix">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多图片项目 -->
</div>

<script>
  var waterfall = document.getElementById("waterfall");
  var items = waterfall.getElementsByClassName("item");

  function waterfallLayout() {
    var columns = Math.floor(waterfall.offsetWidth / items[0].offsetWidth);
    var heights = new Array(columns).fill(0);

    for (var i = 0; i < items.length; i++) {
      var minHeight = Math.min(...heights);
      var minIndex = heights.indexOf(minHeight);

      items[i].style.left = minIndex * items[0].offsetWidth + "px";
      items[i].style.top = minHeight + "px";
      heights[minIndex] += items[i].offsetHeight;
    }
  }

  window.addEventListener("resize", waterfallLayout);
  waterfallLayout();
</script>

代码解释

以上代码实现了一个简单的瀑布流布局。首先，我们需要一个包含多个项目的容器，这里使用一个 id 为 "waterfall" 的 div 元素作为容器。每个项目是一个带有 class 为 "item" 的 div 元素，其中包含一个图片元素。

接下来，我们使用 JavaScript 来实现瀑布流布局的核心逻辑。首先，通过获取容器的宽度和每个项目的宽度，计算出一行可以容纳的列数。然后，使用一个数组来保存每列的当前高度。

通过遍历每个项目，找到当前高度最小的列，将项目定位到该列上，并更新该列的高度。最后，监听窗口大小的变化事件，以便在窗口大小改变时重新计算布局。

总结

通过以上代码，我们可以实现一个基本的 HTML5 瀑布流布局。你可以根据实际需求进行样式调整和功能扩展。希望这个解答对你有帮助！