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= ...
随机推荐
- okhttputils使用（zhuan）
OkHttpUtils 封装了okhttp的网络框架,支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数一起上传),链式调用,可以自定义返回对象,支持Https和自签名证书,支持 ...
- “chm 已取消到该网页的导航”解决方案
1. 右键单击该 CHM 文件,然后单击“属性”. 2. 单击“取消阻止”或者“解除锁定”. 3. 双击此 .chm 文件以打开此文件.
- rhythmbox插件开发笔记2：背景知识学习 D-Bus&VFS&Gio& Python GTK+ 3
这次主要简单介绍下相关的背景知识 D-Bus&VFS&Gio& Python GTK+ 3 D-Bus D-Bus是开源的进程通信(IPC)系统,它允许多个进程进行实时通信. ...
- iOS打包上传app store各种问题解决总结
问题1 this action could not be completed. try again 问题2 there was an error sending data to the iTunes ...
- KissXML类库的使用方法
1.添加附件里面的KissXML到工程 2.加入libxml2.dylib 到Frameworks 3.修改工程信息,右击Targets下工程名选“Get Info”,进入修改Header Searc ...
- 如何 Scale Up/Down Deployment？【转】
伸缩(Scale Up/Down)是指在线增加或减少 Pod 的副本数.Deployment nginx-deployment 初始是两个副本. k8s-node1 和 k8s-node2 上各跑了一 ...
- Open Cascade：AIS_InteractiveContext如何调用函数选择AIS对象
AIS_InteractiveContext如何调用函数选择AIS对象 myAISContext->MoveTo(point.x, point.y, myView); myAISContext- ...
- ArcMap所有Command GUID
The information in this topic is useful if you're trying to programmatically find a built-in command ...
- swift中使用sqlite3
import Foundation /** 1. 打开数据库 2. 如果没有数据表,需要首先创表 3. 数据操作 */ class SQLite { var db: COpaquePointer = ...
- c++ 当输入的数据不符合数据类型时，清理输入流
if (!cin) { cin.clear(); while (cin.get() != '\n') continue; cout << "Bad input; input pr ...