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 相关文章推荐
javascript 图片裁剪技巧解读
Nov 15 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 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加密解密实用类分享
2014/01/07 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Flask框架信号用法实例分析
2018/07/24 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
Linux常见面试题
2013/03/18 面试题
自荐信包含哪些内容
2013/10/30 职场文书
安全生产先进个人材料
2014/02/06 职场文书
政治学求职信
2014/06/03 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Python数据处理的三个实用技巧分享
2022/04/01 Python