整理了js实现图片瀑布流效果的步骤

  • js实现瀑布流效果步骤
    • 写出基本的HTML内容
      • 加入一些css样式
        • 效果一:将宽度固定化(每一行放的图片个数相同)
          • js方法一:要得到父节点(放置主体内容的div盒子)下的子节点(承载图片的div盒子)个数
            • 先得到主体div里面所有内容(使用“*”获取里面所有节点的class名称),再通过if判断语句得到承载图片的div放进数组中
            • 再获取到屏幕的宽度,再除以图片的宽度就能得到每一行能放下的图片个数(再通过Math.floor()函数向下取整来处理得到的值)
            • 最后再在js 更改css样式中更改主体内容div的宽度(等于每张图片*一行放的图片个数),在通过margin:0 auto;让其居中
        • 效果二:每一行的下一行中的第一张图片应该放在上一行的最短图片下
          • 先判断每一排的图片高度谁最短(先得到每一排他图片的高度,在通过Math.min()函数判断最小值)
          • 再得到最矮图片距屏幕左侧的值(offsetLeft)),那这样就得到最矮图片下发的位置,再通过更改css样式改下一张图片的布局,和位置
          • 最后再将最矮图片的高度,和其下方图片的高度相加当成一张图片的高度,那这样再下一张图片就到第二矮的图片的下方
        • 效果三:图片能无限加载
          • 先监听页面的滚动条
          • 当最后一张的图片出现时开始加载图片
            • 先得到最后一张图片
            • 再得到其距顶部的高度(offsetTop),和未被加载出部分被加载出来的高度(scrollTop),和屏幕的高度(clientHeight)
            • 再判断当clientHeight+scrollTop大于offsetTop就可以加载图片了
            • 再写一个json储存图片数据
            • 最后再通过创建节点,和添加节点,将json数据中的图片添加进去
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值