HTML中的瀑布流布局

什么是瀑布流布局?

瀑布流布局是当下比较流行的一种网站页面布局，在网络上随处可见，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动不断加载数据块并附加到当前尾部。比如：

某书页面

瀑布流布局的方式

两种布局方式示例及利弊

用CSS的grid创造瀑布流布局（若还没有学习JavaScript就先不看）

瀑布流布局的五种方式

深度剖析瀑布流

慕课网 瀑布流的讲解

综上，初学者看的话可以先忽略JavaScript的部分，先熟练掌握使用column-count和column-gap来实现瀑布流布局。通俗来说就是通过写CSS设置内容的列数column-count、间隔的宽度column-gap以达到瀑布流的布局。如下：

    <div class="waterfall">

        <div class="item">

            < img src="imge/1.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/2.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/3.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/4.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/5.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/6.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/7.jpeg" alt="">

        </div>

        <div class="item">

            < img src="imge/8.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/章鱼哥大头照.webp" alt="">

        </div>

 

        <div class="item">

            < img src="imge/水分子.png" alt="">

        </div>

 

        <div class="item">

            < img src="imge/1.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/2.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/3.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/4.jpeg" alt="">

        </div>

 

        <div class="item">

            < img src="imge/5.jpeg" alt="">

        </div>

    </div>

    body{

        margin: 0;

        padding: 0;

        height: 5000px;

    }

    

    .waterfall{

        width: 100%;

        column-count: 4;

        column-gap: 10px;

        column-width: 10px;

        position: relative;

    }

    .item{

        box-shadow:5px 5px 5px rgba(51,51,51,0.7); /*阴影*/   

        padding: 10px 10px 10px;

 

    }

   

    .item img{

        width: 100%;

        border-radius: 5px;

       

    }

   .item::before {

  content: "Title 1";

  position: absolute;

  color: aliceblue;

  margin-left: 10px;

  margin-top: 20px;

  font-size: 25px;

   }

 

.item::after {

  content: "#tag1";

  position: relative;

  border-radius: 10px;

  background-color: rgba(243, 240, 240, 0.5);

  top: -50px;

  left: 20px;

  font-size: 25px;

}

效果如下：

 欢迎大家观看及指出不足🤗