【HTML5】------ HTML5实现瀑布流图片

最新推荐文章于 2025-04-07 10:26:43 发布

皮皮冰要做大神

最新推荐文章于 2025-04-07 10:26:43 发布

阅读量2.9k

点赞数 1

分类专栏： # HTML5 文章标签：瀑布流图片html5 HTML5实现瀑布流图片

本文链接：https://blog.youkuaiyun.com/qq_38366657/article/details/81274693

版权

HTML5 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS实现瀑布流布局的方法，通过设置列数、列宽和列间距等属性来展示图片，同时包含了鼠标悬停效果及阴影样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 实现瀑布流图片html 实例代码如下：

body,div ,p{
    padding:0px;
    margin:0px
}
#content
{
    padding:0px;
    margin:0px auto;/* 左右居中 上下为0*/
    width:80%;/*宽为80% */
}
#content .note
{
    column-gap:20px;// 列之间的间隔
    column-width:100%; //列的宽
    column-count:4;//分为几列
    padding-top:50px;
}
#content .note .pubu
{
    margin-bottom:10px;
    border:1px solid #cccccc;
    -moz-page-break-inside: avoid;/* 避免元素内部插入分页符 */
    -webkit-column-break-inside: avoid;/* 避免元素内部插入分页符 */
    break-inside: avoid;/* 避免元素内部插入分页符 */
    text-align: left;
    padding: 15px;
    font-size: 13px;
    box-shadow:0px 0px 10px rgba(102, 102, 102, 0.66);// 这个是四周散步的阴影 
}
#content .note .pubu:hover
{
    border:1px solid #a9a9a9;
    background-color: #fef6ff;
}
.note img
{
    width:100%;
}

<div class="note">
    <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
   <div class="pubu">
     <img src="picture/img_151019672229651.jpg">
     <div class="pubu_pubu">
      <h4>其他风采</h4>
     </div>
    </div>
</div>