当前位置:Gxlcms > JavaScript > 使用JavaScript和jQuery实现瀑布流的示例代码

使用JavaScript和jQuery实现瀑布流的示例代码

时间:2021-07-01 10:21:17 帮助过:19人阅读

本篇文章主要介绍了用JavaScript和jQuery实现瀑布流的方法,具有很好的参考价值。下面跟着小编一起来看下吧

大致介绍

在慕课网上学习了用原生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网其它相关文章!

人气教程排行