南强小屋 Design By 杰米
瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用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="/UploadFiles/2021-04-02/template_native.js">四、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 <"htmlcode">//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); ?>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无jquery实现瀑布流效果 jquery下拉加载新数据的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?