jquery实现瀑布流效果 jquery下拉加载新数据
瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用jquery实现瀑布流效果的代码;
一、页面基本排版
1. items盒子主要用来存放我们需要摆放的数据item;
2. tips是页面加载数据的时候用来提示用户的文本;
<div class="wrapper"> <div class="items"> <div class="item"></div> </div> <p class="tips loading">正在加载...</p> </div>
二、css样式(控制提示语句摆放的位置,还有数据展示的样式)
body { text-align: center; margin: 0; padding: 0; background-color: #F7F7F7; font-family: '微软雅黑'; } .wrapper { padding: 50px; } img { display: block; width: 100%; height: 300px; } .items { position: relative; padding-bottom: 10px; } .item { width: 228px; position: absolute; border: 1px solid #ddd; } .tips { width: 280px; height: 40px; margin: 30px auto 0; text-align: center; line-height: 40px; background-color: #CCC; border-radius: 6px; font-size: 16px; cursor: pointer; position: fixed; bottom: 0px; left: 50%; margin-left: -140px; opacity: 0; color: #666; } .tips.loading { /*background-color: transparent;*/ background-color: #dadada; }
三、模版的引用(由于本例子中数据的展示样式都一致,在这里我引用模版artTemplate)关
1. 记得要先引入这个模版的js包;
2. 定义模版的模块要有一个id,还有设置type;
<script src="../js/template_native.js"></script> <script type="text/html" id="template"> <% for(var i = 0; i < items.length; i++){ %> <div class='item'> <img src="<%=items[i].path%>" alt=""> <p> <%=items[i].text%> </p> </div> <% } %> </script>
四、js控制瀑布流的效果
1. 这里,我请求了两个php分别返回了两个模拟数据;
$(function() { //页面一加载就出现的图片,对应实际百度图片中点击搜索图片 $.ajax({ url: "./reset.php", dataType: "json", success: function(data) { var obj = { items: data }; var result = template("template", obj); $(".items").html(result); waterfall(); } }); }); // 编写瀑布流js function waterfall() { //计算出显示盒子宽度 var totalWidth = $(".items").width(); //计算出单张图片宽度(每张图片宽度是一致的) var eachWidth = $(".items .item").width(); //计算出一行能排布几张图片 var columNum = Math.floor(totalWidth / eachWidth); //将剩余的空间设置成外边距 var margin = (totalWidth - eachWidth * columNum) / (columNum + 1); //定义一个数组用来填充高度值 var heightArr = []; for (var i = 0; i < columNum; i++) { heightArr[i] = 0; } //摆放位置 摆放在最小高度处 var elementItems = $(".items .item"); elementItems.each(function(idx, ele) { //取得一行中高度最小值及其索引 //定义初始的最小值及其索引值 var minIndex = 0; var minValue = heightArr[minIndex]; for (var i = 0; i < heightArr.length; i++) { if (heightArr[i] < minValue) { minIndex = i; minValue = heightArr[i]; } } $(ele).css({ //注意点:这儿乘上的是最小值所在的索引idx left: margin + (margin + eachWidth) * minIndex, top: minValue }); //重新计算高度,更新高度数组 var oldHeight = heightArr[minIndex]; oldHeight += $(ele).height() + margin; heightArr[minIndex] = oldHeight; }); return heightArr; } $(window).on("scroll", function() { if (toBottom()) { $(".tips").css("opacity", 1); $.ajax({ url: "./index.php", dataType: "json", success: function(data) { var dataItem = { items: data }; var res = template("template", dataItem); $(".items").append(res); waterfall(); $(".tips").css("opacity", 0); } }); } }); //判断是否已经到底部了 function toBottom() { var scrollTop = $(window).scrollTop(); var clientHeight = $(window).height(); var offsetTop = $(".items .item:last-child").offset().top; console.log(scrollTop + "..." + clientHeight + "..." + offsetTop); if (scrollTop + clientHeight > offsetTop) { return true; } else { return false; } }
五、最后在这里奉上的是自定义模拟数据,以及简单编写的php返回数据(别忘了,用此种方式获取数据的话,需要开启本地服务器哦~);
如下为返回数据的基本模式,如果想要定义多条数据,只要多复制几条对象就可;
[ { "path": "./images/1.jpg", "text": "中学时候我们班两个同学打赌,内容是在 厕所吃方便面,谁先吃完谁赢,输了的请 赢了的吃一个月的饭,于是厕所里惊现两 个货蹲坑上吃泡面,这俩货还没有决出胜 负,旁边拉屎的哥们都吐了三回了!!!" }, { "path": "./images/2.jpg", "text": "亲戚有许多好兄弟,平时戏称为马哥,牛哥,等等动物名。一次,有人敲门,那时他儿子尚小,一开门,对着他爸妈就说:爸爸,妈妈,驴来了!" } ... ]
如下为php代码:
//reset.php <?php $jsonString = file_get_contents('info/reset.json'); $totalArr = json_decode($jsonString); echo json_encode($totalArr); ?>
//index.php 这里规定一次返回三条数据 <?php $jsonString = file_get_contents('info/data.json'); $totalArr = json_decode($jsonString); $randomKeyArr = array_rand($totalArr,3); $templateArr = array(); for ($i=0; $i <count($randomKeyArr) ; $i++) { $currentKey = $randomKeyArr[$i]; $currentObj = $totalArr[$currentKey]; $templateArr[$i] = $currentObj; } echo json_encode($templateArr); ?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31- 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图...2015-10-30
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-05
- jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效,分享给大家,具体如下效果图:具体代码如下:html代码: <section class="strips"> <article class="strips__strip"> <di...2015-11-24
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23
- jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自...2015-10-30
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15