How to implement a waterfall flow gallery layout using HTML and CSS

How to use HTML and CSS to implement waterfall flow gallery layout

Waterfall flow layout is a common gallery layout method, which arranges pictures in multiple columns. Make the page look more interesting and beautiful. This article will introduce how to use HTML and CSS to implement waterfall flow gallery layout, and provide specific code examples.

1. HTML structure

First, we need to create a container in HTML to wrap all images. For example, we can create a <div> element and set a unique ID to it, such as "gallery": <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;gallery&quot;&gt; &lt;!-- 在这里插入图片 --&gt; &lt;/div&gt;</pre><p>Then, we need to insert multiple picture. We can insert an image using the <code><img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="How to implement a waterfall flow gallery layout using HTML and CSS" > element and then place it in the container we created earlier. For example:

<div id="gallery">
  <img src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
  <img src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
  <img src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
  <!-- 插入更多图片 -->
</div>

Please note that here are simply a few pictures inserted as examples, you can insert more pictures according to your own needs.

2. CSS Style

Next, we need to use CSS to define the style of the waterfall flow layout. First, we can set the width and number of columns of the entire container. For example:

#gallery {
  max-width: 1000px; /* 设置最大宽度 */
  column-count: 3; /* 设置列数 */
  column-gap: 20px; /* 设置列间距 */
}

In the above code, we set the maximum width of the container to 1000 pixels and divide the container into 3 columns. At the same time, we set the spacing between columns to 20 pixels.

Next, we need to adjust the width and height of each image to fit the waterfall layout. We can do this using the width, height and object-fit properties of CSS. For example:

#gallery img {
  width: 100%; /* 使每个图片宽度占满列的宽度 */
  height: auto; /* 根据原始比例调整高度 */
  object-fit: cover; /* 填充整个容器，保持图片比例 */
  margin-bottom: 20px; /* 设置图片之间的垂直间距 */
}

In the above code, we set the width of each image to 100% (full column width), and then automatically adjust the height according to the proportion of the original image. At the same time, we use object-fit: cover; to maintain the proportions of the image and fill the entire container. Finally, we set the vertical spacing between each image to 20 pixels.

3. JavaScript to implement dynamic layout (optional)

If you want the layout of the image to dynamically adjust when the window size changes, you can use JavaScript to achieve this. Here, we can use the resize event of the window object to listen for window size changes and recalculate the layout of the image based on the new window size. For example:

window.addEventListener('resize', function() {
  var gallery = document.getElementById('gallery');
  var columnCount = Math.floor(gallery.offsetWidth / 300); // 假设每列宽度固定为300像素
  gallery.style.columnCount = columnCount;
});

In the above code, we obtain the width of the container in real time by listening to the resize event of the window, and calculate the new number of columns based on the new width. Then, we reset the number of columns by modifying the columnCount property of the container.

Summary

Through the above steps, we can use HTML and CSS to implement the waterfall flow gallery layout. You can adjust the width of the container, the number of columns, and the spacing of images according to your needs to achieve the effect you want. It should be noted that if you want to implement dynamic layout, you can use JavaScript to dynamically adjust the layout. Hope the above content is helpful to you!