jQuery 瀑布流

瀑布流的实现原理

  • 要想实现瀑布流首先需要确定需要排列的内容,宽度需要一致;
  • 设定父容器相对定位,需排列子元素绝对定位;
  • 通过计算容器的宽度(一般为窗口宽度)与元素的宽度,两者相除取整,得到每行防止的元素个数
  • 创建数组,遍历每列的元素高度,将下一个元素放于没列高度最低的元素下方,这样就能成为瀑布流的布局
  • 封装过程还需考虑适配,绑定resize事件,这样屏幕宽度进行变化,同样适用。

demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 什么是瀑布流,说话不形象,直接看图说话 ![S55M%73LKAKO@]OZ7D@MH.png](http://u...
    GarenWang阅读 958评论 0 4
  • 瀑布流布局的特点: 【1】展示的图片元素都是等宽不等高,图片的位置用position:absolute定位来摆放。...
    泰格_R阅读 157评论 0 1
  • 瀑布流实现原理 固定每一个 item 的宽度 根据父级绝对定位 js 计算每一行可以排列几个 (父级总宽度 / i...
    柏龙阅读 525评论 0 1
  • 问题 瀑布流布局的原理是什么 1.计算找出高度最低的一列元素2.将新元素定位放至该列下3.该列高度+=新元素高度4...
    爱上帘外修竹阅读 193评论 0 0