华山资源网

利用jquery实现瀑布流3种案例
网络编程 2024/9/27 佚名
3 1

一、瀑布流是我们常见的案例，这里主要讲述，用jquery的方式实现瀑布流的功能！

引言：我们经常见到很多网站的瀑布流功能，如淘宝、京东这些商品等等..

实现它我们首先考虑几个问题：1、获取到数据 2、排列的方式 3、如何实现排列

其实，在瀑布流里有个核心的功能就是用到了绝对定位

我们逐步深入分析：

这是html的布局，css布局可以自己设置，只要保证grid盒子有绝对定位，其父元素有相对定位即可！后面有参考代码

利用jquery实现瀑布流3种案例

利用jquery实现瀑布流3种案例

下面是script部分

利用jquery实现瀑布流3种案例

这种方式，可以通过for循环按照顺序获取图片的索引值，然后不断的更改其css样式中的top值和left值！

在我们获取图片的资源时，有的时候图片的高度是不一致的，如果一直按照顺序排列，最后的图片显示，排列不整齐，就会效果不佳！

继续往下看：

我们可以通过另一种方法，来实现图片插入当前列最短的一列，可以解决这个问题！

下面我们来主要看一下jquery的代码：

利用jquery实现瀑布流3种案例

好了，现在我们已经通过两种方式解决了瀑布流这个问题，但是我们还有个问题没有解决，那就是做瀑布流很大的原因是因为图片的量比较大，我们一个一个写html是不是有点太low了！

继续往下看：

下面介绍一种利用引擎模板来获取json后台的数据的方式，实现这个问题！

1、我们只需要搭建一个html盒子即可！

利用jquery实现瀑布流3种案例

2、盒子搭建好了，数据要获取啊，就靠它！

利用jquery实现瀑布流3种案例

3、这是两个js库，在网上可下载到！

利用jquery实现瀑布流3种案例

4、下面是具体的js部分，需要仔细分析了！

主要包括，调用搜索引擎模板里获取到的内容，绑定函数，转换成jquery对象！

利用jquery实现瀑布流3种案例

这一部分主要包括：通过ajax向json请求数据

利用jquery实现瀑布流3种案例

这一部分主要包括：遍历函数，进行寻找最短的列排列格子！

利用jquery实现瀑布流3种案例

还有这一些，也是第四部分：

利用jquery实现瀑布流3种案例

最后一步是：滚动的函数，这一部分建议使用console.log在后台验证一下，更容易理解！

利用jquery实现瀑布流3种案例

虽然最后一种办法麻烦，但是这一次完成，我们就可以使用很多次，并且自动获取很多数据！

下面给大家附上原码，大家好好测试一下，不要忘记更改图片和路径哦！ 

第一种方法原码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   /*height: 1000px;*/
   /*border: 1px solid red;*/
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <div class="waterfall">
  <div class="grid">
   <img src="/UploadFiles/2021-04-02/0.png">
 



第二种方法原码： 







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <h3>瀑布流的算法2，看哪个列最矮，插入在哪个列</h3>
 <div class="waterfall">
  <div class="grid">
   <img src="/UploadFiles/2021-04-02/0.png">
 



第三种方法原码： 







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
  .grid .title{
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
  }
  .grid .neirong{
   line-height: 150%;
   font-size: 14px;
   margin-bottom: 20px;
  }
  .grid .zuozhe{
   float: right;
   color:orange;
   font-size: 12px;
  }
  .loading{
   margin: 0 auto;
   width: 400px;
   line-height: 30px;
   text-align: center;
   font-size: 14px;
   background-color: gold;
   color:white;
  }
 </style>
</head>
<body>
 <div class="waterfall" id="waterfall">
  
 </div>
 <div class="loading">
  正在加载...
 </div>

 <script type="text/template" id="grid_template">
 
  <div class="grid">
   <img src="/UploadFiles/2021-04-02/<%=imgurl%>">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com