当前位置：网站首页>实现瀑布流效果

实现瀑布流效果

2022-07-28 19:40:00 【龙雨LongYu12】 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main_cell{
      columns: 5;
      width: 1100px;
      position: relative;
      left: 50%;
      margin-left: -550px;
      column-gap: 5px;
    }
    .img_cell,.img_item{
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="main_cell">
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic16.nipic.com%2F20111008%2F5203963_093910733000_2.jpg&refer=http%3A%2F%2Fpic16.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=38bbac8860f0dd1de7c4cb6950827213" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic14.nipic.com%2F20110527%2F7539498_003034652127_2.jpg&refer=http%3A%2F%2Fpic14.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=accd04ebf014e1e36f75307dcbfe8fd7" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Fmw690%2F002UWGmply1guojkdo2myj60v912ah1602.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=7cb45cb8c9b4b57cdb8cb7a7d0d9b7f4" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F002UWGmply1guojkec979j60v9120q8o02.jpg&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=bc4820183643b3a96b48da58265b7259" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F002UWGmply1guojkenpgrj60v912aahq02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=a3683c7eacbff5880788477af17a2e8e" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic21.nipic.com%2F20120606%2F5137861_093119370162_2.jpg&refer=http%3A%2F%2Fpic21.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=d34e366d0d95a22f80212ba0c0cbaee4" alt="" srcset="">
    </div>
    <div>
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F002UWGmply1guojkaind4j60u011i79n02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=5f4429b18cb6c3c9f642f2dead395e45" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14049074344%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=2449df9759c0b2e34b4ecc729d38f3aa" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Fmw690%2F002UWGmply1guojkdo2myj60v912ah1602.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=7cb45cb8c9b4b57cdb8cb7a7d0d9b7f4" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F002UWGmply1guojkec979j60v9120q8o02.jpg&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=bc4820183643b3a96b48da58265b7259" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F002UWGmply1guojkenpgrj60v912aahq02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=a3683c7eacbff5880788477af17a2e8e" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
    </div>
    <div  class="img_cell">
      <img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
    </div>
  </div>
</body>
</html>

 

原网站

版权声明
本文为[龙雨LongYu12]所创，转载请带上原文链接，感谢
https://blog.csdn.net/A88552211/article/details/126024146

边栏推荐

猜你喜欢

随机推荐