css 通过column-count几行代码实现自适应瀑布流图片效果代码-html代码-BFW代码库

css 通过column-count几行代码实现自适应瀑布流图片效果代码

代码语言：html

所属分类：瀑布流

代码描述：css 通过column-count几行代码实现自适应瀑布流图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  background: lightblue;
}
main {
  margin: 0 auto;
  max-width: 1600px;
  padding: 100px 20px 0;
}
img {
  width: 100%;
}
.photo-grid-container {
  column-count: 5;
  column-width: 300px;
}
.photo-grid-item {
  margin: 0 auto 15px;
  max-width: 400px;
  width: 100%;
}
</style>




</head>

<body  >
  <main>
  <section class="photo-grid-container">
    <div class="photo-grid-item">
      <img src="//repo.bfw.wiki/bfwrepo/image/5d6538a375a7b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="">
    </div>
    <div class="photo-grid-item">
      <img src="//repo.bfw.wiki/bfwrepo/image/5d6537c07e9bd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90" alt="">
    </div>
    <div class="photo-grid-item">
      <img src="//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90" alt="">
    </div>
    <div class="photo-grid-item">
      <img src="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_700,/quality,q_90" alt="">
    </div>
    <div class="photo-grid-item">
      <img src="//repo.bfw.wiki/bfwrepo/image/5d65399a14ba1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="">
    </div>
    <div class="photo-grid-item">
      <img src="//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90" alt=&qu.........完整代码请登录后点击上方下载按钮下载查看