微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：jQuery作者：编程之家AI导航网

一、瀑布流

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

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

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

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

我们逐步深入分析：

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

下面是script部分

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

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

继续往下看：

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

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

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

继续往下看：

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

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

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

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

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

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

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

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

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

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

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

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

第一种方法原码：

rush:xhtml;"> <Meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> Document

瀑布流的算法2，看哪个列最矮，插入在哪个列

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内内容内容内容内内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

<script type="text/javascript" src="js/jquery-1.12.3.min.js">
<script type="text/javascript" src="js/underscore.js">
<script type="text/javascript">
window.onload = function(){
//每个格格不一定往自己序号%3这个列插入，看哪个列目前最矮，插在哪里=
//得到所有的grid
$grids = $(".grid");
//用一个数组存储当前三个列的总高度
var colHeight = [0,0];
// console.log(colHeight);
// 遍历小格格
$grids.each(function(){
//找一下当前的最短列是谁
var minValue = .min(colHeight); //colHeight里面的最小的值！
//看一下最短列出现在index几的位置上
var minIndex = .indexOf(colHeight,minValue);//最短的值的下标
// console.log(minIndex);
$(this).css({
"top" : minValue,"left" : minIndex * 270
});
colHeight[minIndex] += $(this).outerHeight() + 20;
// console.log(colHeight[minIndex]);
})
}

第三种方法原码：

rush:xhtml;"> <Meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> Document

<script type="text/template" id="grid_template">

<div class="grid">

<script type="text/javascript" src="js/jquery-1.12.3.min.js">
<script type="text/javascript" src="js/underscore.js">

<script type="text/javascript">
// 定义变量和对象
// 获取引擎模板中发的内容，使用jquery转化成字符串
var templateString = $("#gridtemplate").html();
// 把转化后的字符串绑定在compileFunction函数上!
var compileFunction = .template(templateString);//_.template（）返回的是一个函数！
// console.log(typeof(compileFunction)); //function

//转换成jquery对象,为了后面使用jquery的方法
var $waterfall = $("#waterfall");
var $loading = $(".loading");

//三列瀑布流，每列的总高度
var colHeight = [0,0];
// 这是三列的高度数组，与里面的数值无关，表示index的顺序
// console.log(colHeight);

// 获取数据
//信号量
var page = 1;

getJSONandRender(page);

function getJSONandRender(page){
// 为了增加用户体验
$loading.show();

//发出ajax请求
$.get("json/json" + page + ".txt",function(data){ //输出字符串
//转为对象
var dataObj = eval("(" + data + ")"); //解析ajax数据，转换成对象！
//没有更多数据了
// dataObj.news.length来自后台json
if(dataObj.news.length == 0){
$loading.show().html("没有更多了");
return; //在这里截止后，lock也会截止
}

// 遍历函数，动态获取下标值根据绝对定位的位置进行排列！
.each(dataObj.news,function(dictionary){ //每遍历一次，执行一次函数！
//这是系统内置构造函数
var image = new Image(); //实例化一个对象分配内存空间
// 当对象被实例化后，构造函数会立即执行它所包含的任何代码
image.src = dictionary.imgurl;
//我们现在给image转为jQuery对象，然后绑定事件
$(image).load(function(){
// console.log(dictionary.imgurl + "加载完毕");
var domString = compileFunction(dictionary);
// console.log(typeof(domString));
var $grid = $(domString);
$waterfall.append($grid);
//根据瀑布流算法，设置它的left、top
// 最小值
minValue = .min(colHeight);
// 最小值的位置！
minIndex = _.indexOf(colHeight,minValue);
$grid.css({
"top" : minValue,"left" : minIndex * 270
});
//改变总列高数组的值
colHeight[minIndex] += $grid.outerHeight() + 10;

  //让大盒子根据最高的列设置高度
  $waterfall.css("height",_.max(colHeight));

  //隐藏loading文本
  $loading.hide();
 });
});

lock = true;

});
}

var lock = true;
//监听滚动
$(window).scroll(function(){
if(!lock) return;
var rate = $(window).scrollTop() / ($(document).height() - $(window).height());

if(rate >= 0.7){
page ++;
getJSONandRender(page);
lock = false;
}
})

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

jquery瀑布流

相关推荐

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(&quot;.list_r&quot;).find(&#39;span&#39;).css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 &#39;color&#39;: &quot;#838792&quot;
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot;time&quot;&gt;&lt;/span&gt; js: &lt;script src=&quot;Js/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;%--引用jQuery
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../../AJs/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).re
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&quot;&lt;script type=&#39;text/javascript&#39;&gt;alert(&quot;XXX&quot;);&lt;/script&gt;&quot;); 此方只能调用内部函数
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 &lt;%@ Page Language=&quot;C#&quot; Auto
.Net后台调用js，提示、打开新窗体、关闭当前窗体
.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write(&quot;&lt;script&gt;window.alert(&#39;支付成功!&#39;);window.open(&#39;/JkCommerce/&quot; + href + &quot;&#39;,&
.net 搜索联想词
思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 &lt;div class=&quot;sc_con&quot; id=&quot;bbsearch&quot;&gt; &lt;input type=&quot;text&quot; class=&
JS点击子元素不触发父元素点击事件(js阻止冒泡)
&lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; .divone{width:100
jQuery表单验证提交：前台验证一
jQuery表单验证提交：前台验证一（图文+视频）
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native