扫码关注官方订阅号
地址：http://overapi.com/css
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
这种叫瀑布流https://github.com/desandro/masonry
刚才用f12看了一下，元素是绝对定位，通过js来改变元素的位置。在页面宽度缩小的时候，最右边一列的元素会自动跳入其它列，但插入到其他列也依然能维持每一列基本一致的长度。我有一个想法不知道对不对。举个例子，五个元素的高度分别是2,5,6,7,9。将这5个元素排成2列，将最小高度和最大高度放在一列，2+9=11是一列，5+7=12是一列，最后剩下一个高度为6的元素加在2+9=11那一列，这样就能保证每一列高度都差不多。
属于瀑布流布局，通过js计算每次的最小高度和位置，将新添加的节点放在最小高度后面，然后给其添加动画效果，就是你给出的那种效果。
瀑布流布局
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
4
239
收藏
这种叫瀑布流
https://github.com/desandro/masonry
刚才用f12看了一下，元素是绝对定位，通过js来改变元素的位置。在页面宽度缩小的时候，最右边一列的元素会自动跳入其它列，但插入到其他列也依然能维持每一列基本一致的长度。我有一个想法不知道对不对。举个例子，五个元素的高度分别是2,5,6,7,9。将这5个元素排成2列，将最小高度和最大高度放在一列，2+9=11是一列，5+7=12是一列，最后剩下一个高度为6的元素加在2+9=11那一列，这样就能保证每一列高度都差不多。
属于瀑布流布局，通过js计算每次的最小高度和位置，将新添加的节点放在最小高度后面，然后给其添加动画效果，就是你给出的那种效果。
瀑布流布局