零基础建站培训教程介绍

当前位置:

纯CSS 实现图片列表瀑布流展示

我们建网站时,有的栏目需要以图片列表的方式进行排版展示,比较好看的图片展示方式就是图片列表瀑布流展示。以下是图片列表瀑布流展示的示意图:

图片列表瀑布流展示

怎么在自己建网站时,让自己的网站图片列表以瀑布流展示呢?下面学做网站论坛就来分享一下纯CSS 实现图片列表瀑布流展示的方法。(如果不懂HTML代码,请先学习HTML入门教程

方法/步骤

  1. 通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。
    .masonry 是瀑布流容器,里面放置了列表 item,在 .masonry 中设置 column-count(列数) 和 column-gap(列间距)
    item 中设置 break-inside:avoid,这是为了控制文本块分解成单独的列,以免项目列表的内容跨列,破坏整体的布局。设置这样的 html 结构:

    
    
    </pre>
    <div class="masonry">
    <div class="item">
    <div class="item_content content-lar">1 我最大</div>
    </div>
    <div class="item">
    <div class="item_content content-sma">2 我最小</div>
    </div>
    <div class="item">
    <div class="item_content content-mid">3 我中等</div>
    </div>
    <div class="item">
    <div class="item_content content-sma">4 我最小</div>
    </div>
    <div class="item">
    <div class="item_content content-mid">5 我中等</div>
    </div>
    <div class="item">
    <div class="item_content content-lar">6 我最大</div>
    </div>
    <div class="item">
    <div class="item_content content-sma">7 我最小</div>
    </div>
    <div class="item">
    <div class="item_content content-lar">8 我最大</div>
    </div>
    <div class="item">
    <div class="item_content content-lar">9 我最大</div>
    </div>
    <div class="item">
    <div class="item_content content-sma">10 我最小</div>
    </div>
    <div class="item">
    <div class="item_content content-mid">11 我中等</div>
    </div>
    <div class="item">
    <div class="item_content content-mid">12 我中等</div>
    </div>
    <!-- more items --></div>
    <pre>
  2. 在 css 中设置包裹 masonry 和 item 的属性样式:
    
    
    .masonry {
      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari 和 Chrome */
      column-count:3;
      -moz-column-gap: 2em;
      -webkit-column-gap: 2em;
      column-gap: 2em;
      width: 70%;
      margin:2em auto;
    }
    .item {
      padding: 2em;
      margin-bottom: 2em;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      background: #f60;
      color: #fff;
      text-align: center;
    }
    .item .content-lar {
      height: 200px;
    }
    .item .content-mid {
      height: 100px;
    }
    .item .content-sma {
      height: 50px;
    }
  3. 如果想让瀑布流适应手机网站,可以借助媒体查询属性,在不同屏幕大小的条件下设置瀑布流容器 masonry 的 column-count 来自适应改变列数:
    
    
    @media screen and (max-width: 800px) {
      .masonry {
        column-count: 2; /* two columns on larger phones */
      }
    }
    @media screen and (max-width: 500px) {
      .masonry {
        column-count: 1; /* two columns on larger phones */
      }
    }
  4. 这样通过单纯的HTML与CSS就可以实现在自己建网站时实现图片列表瀑布流展示效果了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注