jquery实现瀑布流效果 jquery下拉加载新数据


Posted in Javascript onDecember 12, 2016

瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用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);
 ?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JS字符串截取函数实例
Dec 27 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
详解Node.js开发中的express-session
May 19 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
AngularJS封装指令方法详解
Dec 12 #Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 #Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 #Javascript
jQuery Ajax File Upload实例源码
Dec 12 #Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
You might like
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python判断是空的实例分享
2020/07/06 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Java面试题汇总
2015/12/06 面试题
如何做好总经理助理
2013/11/12 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
js Proxy的原理详解
2021/05/25 Javascript
Android存储中最基本的文件存储方式
2022/04/30 Java/Android