时间:2021-07-01 10:21:17 帮助过:19人阅读
大致介绍
在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记
用Javascript实现
基本结构:
<p id="main"> <p class="box"> <p class="pic"><img src="images/1.jpg" alt=""></p> </p> <p class="box"> <p class="pic"><img src="images/2.jpg" alt=""></p> </p> ... ... ... </p>
基本样式:
*{ margin: 0px; padding: 0px; } #main{ position: relative; } .box{ padding: 15px 0 0 15px; float: left; } .pic{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; }
思路:
1、获取#main下的所有.box
2、计算页面中图片有几列,并设置页面的宽度
3、找出这几列中高度最小的列
4、从第二行开始,设置图片为相对定位,把一张图片放到高度最小列的下面
5、更新列的高度,重复3、4、5步骤,直至图片加载完
6、根据最后一张图片的位置确定是否继续加载图片(懒加载)
实现:
1、获取#main下的所有.box
2、计算页面中图片有几列,并设置页面的宽度
3、找出这几列中高度最小的列
4、从第二行开始,设置图片为相对定位,把一张图片放到高度最小列的下面
5、更新列的高度,重复3、4、5步骤,直至图片加载完
6、根据最后一张图片的位置确定是否继续加载图片(懒加载)
假设是后台给的数据
当滚动条滚动时执行
根据最后一张图片的位置,来判断是否进行加载
加载图片
用jQurey实现
用jQuery实现的思路都是一样的,就直接放代码
以上就是使用JavaScript和jQuery实现瀑布流的示例代码的详细内容,更多请关注Gxl网其它相关文章!