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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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生成扇形比例图实例
2013/11/06 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python 魔法函数实例及解析
2019/09/25 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
小学爱国卫生月活动总结
2014/06/30 职场文书
会计个人实习计划书
2014/08/15 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
企业战略合作意向书
2015/05/08 职场文书