jQuery方式实现图片瀑布流

瀑布流原理

瀑布流原理

步骤:

1、首先确定图片的列数
2、第一行图片默认位置
3、top属性:后续的每一张图片需要放置到高度最小的列数的位置,放到该位置后,对应列的高度增加防止图片的高度
4、left属性:放置列的索引值*图片宽度
5、之后的图片都需要进行3、4步骤的操作。

因此,需要一个数组存储列的当前高度值,每次需要放置一张图片,需要查找数组的最小值(列的最小高度),并且找出最小值对应的索引(列号),至此获取绝对定位的top,left属性值。

初始效果图:
原始效果图

函数实现代码

function waterFall(){
   
    var screenWidth =$(window).width(
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值