纯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 结构：

   
   <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>
   
   

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就可以实现在自己建网站时实现图片列表瀑布流展示效果了。