CSS3 如何实现响应式的瀑布流? 下面本篇文章通过实例来介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
前言: 虽然瀑布流在现在不是很流行了, 自己之前通过 JavaScript 和 css3 都实现过. 这次做项目的时候又遇到了这个问题, 就重新整理了一下, 并把代码放出来分享一下
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- .waterfall {
- width: 80%;
- column-gap:10px;
- column-count: 4;
- margin: 0 auto;
- }
- .item {
- padding: 10px;
- margin-bottom: 10px;
- break-inside: avoid;
- border: 1px solid #000;
- }
- img {
- width: 100%;
- }
- p {
- line-height: 30px;
- }
- @media (min-width: 992px) and (max-width: 1300px) {
- .waterfall {
- column-count: 3;
- }
- p {
- color:red;
- }
- }
- @media (min-width: 768px) and (max-width: 991px) {
- .waterfall {
- column-count: 2;
- }
- p {
- color: orange;
- }
- }
- @media (max-width: 767px) {
- .waterfall {
- column-count: 1;
- }
- }
- </style>
- </head>
- <body>
- <div>
- <div>
- <img src="1.jpg" alt="" />
- <p>
夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚夫子庙的夜晚
- </p>
- </div>
- <div>
- <img src="2.jpg" alt="" />
- <p>
秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
秦淮事秦淮河的故事
- </p>
- </div>
- <div>
- <img src="3.jpg" alt="" />
- <p>
集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光
集贤亭的风光集贤亭的风光集贤亭的风光集贤亭的风光
- </p>
- </div>
- <div>
- <img src="4.jpg" alt="" />
- <p > 茅家铺的清新茅家铺的清新茅家铺的清新 </p>
- </div>
- <div>
- <img src="5.jpg" alt="" />
- <p > 美丽洲的神秘 </p>
- </div>
- <div>
- <img src="6.jpg" alt="" />
- <p > 曲院风荷的优雅曲院风荷的优雅曲院风荷的优雅 </p>
- </div>
- <div>
- <img src="1.jpg" alt="" />
- <p > 夫子庙的夜晚 </p>
- </div>
- <div>
- <img src="2.jpg" alt="" />
- <p>
秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事秦淮河的故事
秦淮河的故事
- </p>
- </div>
- <div>
- <img src="3.jpg" alt="" />
- <p > 集贤亭的风光 </p>
- </div>
- <div>
- <img src="4.jpg" alt="" />
- <p > 茅家铺的清新茅家铺的清新茅家铺的清新 </p>
- </div>
- <div>
- <img src="5.jpg" alt="" />
- <p > 美丽洲的神秘 </p>
- </div>
- <div>
- <img src="6.jpg" alt="" />
- <p > 曲院风荷的优雅曲院风荷的优雅曲院风荷的优雅 </p>
- </div>
- </div>
- </body>
- </HTML>
实现效果图 (为了更加清晰的表示, 我也把字体颜色修改了一下)
页面宽度 1300 像素的时候
页面宽度在 992 个像素到 1300 像素之间的时候
页面宽度在 768 个像素到 991 像素之间的时候
页面宽度小于 768 像素的时候
(完)
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17435.html