扫码关注官方订阅号
可以用flex-box
#container { padding: 0; margin: 0; display: flex; flex-flow: column wrap; height: 4em; width: 3.6em; } .same_width { background-color:#E91E63; width: 1em; margin: 0.1em; } #a {height:1em} #b {height:2em} #c {height:3em} #d {height:4em} #e {height:2em} #f {height:1em} #g {height:2em}
<p id="container"> <p id="a" class="same_width"> </p> <p id="b" class="same_width"> </p> <p id="c" class="same_width"> </p> <p id="d" class="same_width"> </p> <p id="e" class="same_width"> </p> <p id="f" class="same_width"> </p> <p id="g" class="same_width"> </p> </p>
效果:
纯css貌似做不到...用js的实现方法有几种,
用css+p写4列, 然后用js按顺序先将每列填充1个, 从第五个开始, 计算出高度最小的列, 往里面填充第五个, 按第五个的规则, 一直循环到最后一个
用绝对定位, 用js计算每个的top和left
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>1</title> <style> * { margin: 0; padding: 0; list-style: none; } li { width: 20%; float: left; } li + li { border-left: 1px solid red; } p { margin-bottom: 10px; text-align: center;} </style> </head> <body> <ul id="list"> <li></li> <li></li> <li></li> <li></li> </ul> <script> var list = document.querySelector('#list').querySelectorAll('li'); for (var i = 0; i <= 50; i++) { var j = i % 4; list[j].insertAdjacentHTML('beforeEnd', '<p>' + i + '</p>'); } </script> </body> </html>
建议采用插件写吧,快捷,方便,网上有很多瀑布流的插件,你去看看。
这是瀑布流布局,纯css实现起来很困难,应该要配合js实现,建议谷歌瀑布流,即可找到答案。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
可以用flex-box
效果:
纯css貌似做不到...
用js的实现方法有几种,
用css+p写4列, 然后用js按顺序先将每列填充1个, 从第五个开始, 计算出高度最小的列, 往里面填充第五个, 按第五个的规则, 一直循环到最后一个
用绝对定位, 用js计算每个的top和left
建议采用插件写吧,快捷,方便,网上有很多瀑布流的插件,你去看看。
这是瀑布流布局,纯css实现起来很困难,应该要配合js实现,建议谷歌瀑布流,即可找到答案。