jquery 瀑布流

瀑布流布局的特点:

【1】展示的图片元素都是等宽不等高,图片的位置用position:absolute定位来摆放。
【2】一行能摆放多少图片的数量=获取当前窗口宽度/图片固定宽度。注意:获取元素宽度是不要使用.width(),这种方法获取的是div元素的content宽度。使用$('.item').outerWidth(true) //获取元素的整个宽度(内容宽度+内边距+边框+外边距)
【3】图片的摆放位置遵循规律:下一张图片始终摆放在页面中图片高度之和最小的那一列下面,图片位置水平方向=图片数组索引号*图片固定宽度,垂直方向位置=图片数组索引号对应的值(即当前列的图片高度之和)。图片摆放后更新当前列的所有图片总高度。
注意:该步骤可理解为,给定一个数组,在该数组中找出成员最小值和该成员在数组中的索引号。首先假定数组中某个值为最小值,然后用for循环遍历数组中的所有成员和假定最小值比较,如果某数组成员的值小于假定值,则获取将该值(colSumHeight[i])和对应的索引号(i)。
【4】设置初始状态数组,数组长度等于当前一行能摆放的图片数,该数据记录每行中每张图片的高度,数组的索引号记录图片在每行上第几列的位置。每张图片摆放后,修改数组内对应索引号成员的值(即当前列的高度之和)
预览地址
代码地址

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

推荐阅读更多精彩内容

  • 什么是瀑布流,说话不形象,直接看图说话 ![S55M%73LKAKO@]OZ7D@MH.png](http://u...
    GarenWang阅读 963评论 0 4
  • 瀑布流实现原理 固定每一个 item 的宽度 根据父级绝对定位 js 计算每一行可以排列几个 (父级总宽度 / i...
    柏龙阅读 527评论 0 1
  • 布局 HTML代码如下: CSS代码如下: 图片位置的排放 思路如下: 确定每排能够放的图片个数 取得每张图片的高...
    Gopal阅读 173评论 0 0
  • 瀑布流的实现原理 要想实现瀑布流首先需要确定需要排列的内容,宽度需要一致; 设定父容器相对定位,需排列子元素绝对定...
    尹萨萨阅读 173评论 0 0
  • 瀑布流特别适合多图片布局加载,效果很理想。 masonry是基于jquery的瀑布流插件,简单实用,本文就以滑动无...
    小蒿阅读 7,570评论 4 8