扫码关注官方订阅号
纯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扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
4
504
收藏
纯css貌似做不到...
用js的实现方法有几种,
用css+p写4列, 然后用js按顺序先将每列填充1个, 从第五个开始, 计算出高度最小的列, 往里面填充第五个, 按第五个的规则, 一直循环到最后一个
用绝对定位, 用js计算每个的top和left
建议采用插件写吧，快捷，方便，网上有很多瀑布流的插件，你去看看。
这是瀑布流布局，纯css实现起来很困难，应该要配合js实现，建议谷歌瀑布流，即可找到答案。