ajax 下拉加载更多效果
1.生成HTML
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title> <style type="text/css">
.item {
width: 640px;
/* height: 452px; */
background-color: #eee;
margin-top: 50px;
border-radius: 5px;
overflow: hidden;
} .item .cover {
display: block;
} .item .cover img {
display: block;
} .item .bottom {
height: 35px;
position: relative;
} .item .bottom a {
text-decoration: none;
line-height: 35px;
font-family: '微软雅黑';
margin-left: 20px;
color: gray;
} .item .bottom .rightBox {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
} .item .bottom .rightBox span {
line-height: 35px;
margin: 0 20px;
font-size: 15px;
/* font-family: "微软雅黑"; */
color: gray;
} .item .bottom .rightBox span::before {
margin-right: 10px;
color: #dd5a64;
} .getMore {
width: 100px;
height: 100px;
border: none;
background-color: skyblue;
position: fixed;
right: 100px;
top: 50%;
margin-top: -50px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head> <body>
<h1>使用jq写的页面</h1>
<input type="button" value="加载更多" class='getMore'>
<div class="container">
<div class="item">
<a href="#" class='cover'><img src="data:images/vol.859.jpg" alt=""></a>
<div class="bottom">
<a href="#">vol.847 用一首歌来想象你</a>
<div class='rightBox'>
<span class='icon-heart'>18554</span>
<span class='icon-comment'>292</span>
</div>
</div>
</div>
</div>
</body> </html> <!-- 导入js插件 模板插件-->
<script type="text/javascript" src='js/template-native.js'></script> <!-- 导入jq -->
<script type="text/javascript" src='js/jquery.min.js'></script> <!-- 定义模板 -->
<script type="text/template" id='template'>
<%for(var i=0;i<items.length;i++){%>
<div class="item">
<a href="#" class='cover'><img src="<%=items[i].path%>" alt=""></a>
<div class="bottom">
<a href="#">
<%=itmes[i].name%>
</a>
<div class='rightBox'>
<span class='icon-heart'><%=itmes[i].star%></span>
<span class='icon-comment'><%=itmes[i].message%></span>
</div>
</div>
</div>
<%}%> </script> <!-- 自己的代码 -->
<script type="text/javascript">
// 使用jq 绑定点击事件
$(function() {
$(".getMore").click(function() {
// 使用 jq 发送 ajax请求
$.ajax({
url: '02.getMore.php',
type: 'get',
success: function(data) {
// console.log(data);
// 转化为 js对象 数组
var oneObj = JSON.parse(data); // 包装为 js对象
var obj = {
items: [oneObj]
}; // 调用模板引擎的方法 填充数据
var resultStr = template('template', obj); // 添加到界面上
$('.container').append(resultStr);
}
});
})
})
</script>
2.引入json文件
[
{
"path":"images/vol.859.jpg",
"name":"vol.859 那阳光，灿烂到心底",
"star":"6977",
"message":"188"
},{
"path":"images/vol.858.jpg",
"name":"vol.858 守望者",
"star":"9012",
"message":"188"
},{
"path":"images/vol.857.jpg",
"name":"vol.857 日落黄昏时",
"star":"9012",
"message":"188"
},{
"path":"images/vol.856.jpg",
"name":"vol.856 生命中不能承受之轻",
"star":"9012",
"message":"188"
},{
"path":"images/vol.855.jpg",
"name":"vol.855 尽是多情之意",
"star":"9012",
"message":"188"
},{
"path":"images/vol.854.jpg",
"name":"vol.854 摇滚的孩子不会老去",
"star":"9012",
"message":"188"
},{
"path":"images/vol.853.jpg",
"name":"vol.853 散落的光阴",
"star":"9012",
"message":"188"
},{
"path":"images/vol.852.jpg",
"name":"vol.852 夜色正迷离",
"star":"9012",
"message":"188"
},{
"path":"images/vol.851.jpg",
"name":"vol.851 The Party Is Not Over",
"star":"9012",
"message":"188"
},{
"path":"images/vol.850.jpg",
"name":"vol.850 因为短暂 所以永恒",
"star":"9012",
"message":"188"
},{
"path":"images/vol.849.jpg",
"name":"vol.849 时代挽歌",
"star":"9012",
"message":"188"
},{
"path":"images/vol.848.jpg",
"name":"vol.848 夜漫长",
"star":"9012",
"message":"188"
},{
"path":"images/vol.847.jpg",
"name":"vol.847 用一首歌来想象你",
"star":"9012",
"message":"188"
},{
"path":"images/vol.846.jpg",
"name":"vol.846 说给你听",
"star":"9012",
"message":"188"
},{
"path":"images/vol.845.jpg",
"name":"vol.845 The L World",
"star":"9012",
"message":"188"
},{
"path":"images/vol.844.jpg",
"name":"vol.844 江湖",
"star":"9012",
"message":"188"
},{
"path":"images/vol.843.jpg",
"name":"vol.843 回家",
"star":"9012",
"message":"188"
},{
"path":"images/vol.842.jpg",
"name":"vol.842 故人难却",
"star":"9012",
"message":"188"
},{
"path":"images/vol.841.jpg",
"name":"vol.841 总有片刻的悲伤和欢愉",
"star":"9012",
"message":"188"
},{
"path":"images/vol.840.jpg",
"name":"vol.840 停下来看看世界的风景",
"star":"9012",
"message":"188"
}
]
3.后台调用数据 返回到
<?php
// 读取json文件 str
$str = file_get_contents('data/info.json'); // 转化为 php中的数组 str->php arr
$arr = json_decode(json)($str); // 从数组中 获取 某一个元素 array_rand(arr,1); 随机的index
$randomKey = array_rand($arr,1); // 讲 获取到的单个 元素 返回给浏览器
$oneObj = $arr[$randomKey]; // 获取的是 php对象 // 因为 如果直接 $oneObj返回 发回的格式 是 php中的 对象 并不是 json格式字符串
// print_r($oneObj); // 直接将 对象 返回给 浏览器 不能直接使用echo // 所以 我们需要 使用 json_encode 进行转化 obj ->str json 格式 字符串
echo json_encode($oneObj);
?>
ajax 下拉加载更多效果的更多相关文章
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- jquery实现下拉加载更多
下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...
- dropload.js下拉加载更多
项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...
- H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- Windows Phone 8.1开发：如何让ListView下拉加载更多？
Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...
- 下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
- JQ下拉加载更多
<!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...
随机推荐
- 5、两个栈实现队列------------>剑指offer系列
题目 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路 栈1: 用于入队列存储 栈2: 出队列时将栈1的数据依次出栈,并入栈到栈2中 栈2出栈即栈1的底部数据 ...
- iOS 通知、本地通知和推送通知有什么区别？ APNS机制。
本地/推送通知为不同的需要而设计.本地通知对于iPhone,iPad或iPod来说是本地的.而推送通知——来自于设备外部.它们来自远程服务器——也叫做远程通知——推送给设备上的应用程序(使用APNs) ...
- FusionCharts3.2.1 参数的详细说明和功能特性
功能特性animation 是否动画显示数据,默认为1(True)showNames 是否显示横向坐标轴(x轴)标签名称rotat ...
- watchguard 软件工程师内部招聘！
作为watchguard正式员工,现发布公司最近的招聘信息,待遇优厚,请符合条件的朋友和我联系并将简历发给我,我会尽早联系公司人力部门. 我的邮件:daibao91888@163.com 博客:htt ...
- Cordova插件中JavaScript代码与Java的交互细节介绍
在Cordova官网中有这么一张架构图:大家看右下角蓝色的矩形框"Custom Plugin"--自定义插件.意思就是如果您用Cordova打包Mobile应用时,发现您的移动应用 ...
- HDOJ 4509 湫湫系列故事——减肥记II（2013腾讯编程马拉松） 并查集合并区间
发现这种合并区间的题目还可以这么玩 给你n段时间 然后问没被占用的时间是多少 题目所给的区间是右开的导致我wa 好多人5e5*1440的暴力跑出来的时间居然只是我的两倍 不懂.... 所以并查集并没有 ...
- R文件报错的原因
一般R文件报错,无非是资源文件错误,图片命名错误,但是编译都会报错,可以很快解决.但是前几天,引入一个第三方aar包后,项目编译正确,但是就是R文件报错,找不到R文件,整个项目一片报红. 1)首先编译 ...
- angstromctf -No libc for You
0x00 syscall syscall函数原型为: int syscall(int number, ...) 其中number是系统调用号,number后面应顺序接上该系统调用的所有参数.大概意思是 ...
- Paxos算法与Zookeeper分析,zab (zk)raft协议(etcd) 8. 与Galera及MySQL Group replication的比较
mit 分布式论文集 https://github.com/feixiao/Distributed-Systems wiki上描述的几种都明白了就出师了 raft 和 zab 是类似的,都是1.先选举 ...
- 微信小程序canvas实现圆形计时器功能
index.js import Canvas from '../../utils/canvas.js'Page({ ...Canvas.options, /** * 页面的初始数据 */ data: ...