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 中介者模式实例
Dec 16 Javascript
Javascript事件实例详解
Nov 06 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 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作的文本留言本的例子(二)
2006/10/09 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
Vue render深入开发讲解
2018/04/13 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python最长回文串算法
2018/06/04 Python
python datetime处理时间小结
2020/04/16 Python
七年级生物教学反思
2014/01/30 职场文书
房地产推广策划方案
2014/05/19 职场文书
爱我中华演讲稿
2014/05/20 职场文书
英语教师求职信
2014/06/16 职场文书
卖车协议书范例
2014/09/16 职场文书
五年级学生评语大全
2014/12/26 职场文书
董事长岗位职责
2015/02/13 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技