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=""> </div> <div class="photo-grid-item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d653af4b0523.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_370,/quality,q_90" alt=""> </div> <div class="photo-grid-item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_600,/quality,q_90" alt=""> </div> <div class="photo-grid-item"> <img src="//repo.bfw.wiki/bfwrepo/image/5d65eac5da40b.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/5d65eaff5a217.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90" alt=""> </div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0