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= ...
随机推荐
- 关于如何用jq定位到某个元素的索引
在点击事件触发时候,通常如果有同样的className的列表我们都需获取它的索引来知道到底点击的是那一个 $('.info_content').mousemove(function(){ var ro ...
- hdu6118 度度熊的交易计划
思路: 将生产和运输费用视作产出,将销售获利视作投入,计算最小费用可行流(不一定是最大流).注意片区之间的高速公路是双向边. 实现: #include <iostream> #includ ...
- 初学者应该怎么学习前端？web前端的发展路线大剖析！
写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...
- Android 两个ArrayList找出相同元素及单个ArrayList删除元素
//从一个ArrayList中删除重复元素 List<String> arrayList1 = new ArrayList<String>(); arrayList1.add( ...
- “chm 已取消到该网页的导航”解决方案
1. 右键单击该 CHM 文件,然后单击“属性”. 2. 单击“取消阻止”或者“解除锁定”. 3. 双击此 .chm 文件以打开此文件.
- Windwos下安装和使用MongoDB
1)下载安装包下载路径:https://www.mongodb.com/download-center#community包名称:mongodb-win32-x86_64-3.4.10-signed. ...
- POJ 2486 Apple Tree （树形DP，树形背包）
题意:给定一棵树图,一个人从点s出发,只能走K步,每个点都有一定数量的苹果,要求收集尽量多的苹果,输出最多苹果数. 思路: 既然是树,而且有限制k步,那么树形DP正好. 考虑1个点的情况:(1)可能在 ...
- 远程linux服务器mysql数据库导入和导出.sql文件
大部分情况本地开发环境为windows,部署的服务器为Linux,本地数据库导出.sql文件后需要远程导入服务器,具体如下. 首先连接服务器,即服务器ip,协议,端口,用户名及密码,可以通过ftp客户 ...
- nginx 编译某个模板的问题./configure: error: SSL modules require the OpenSSL library. You can either do not enable the modules, or install the OpenSSL library into the system, or build the OpenSSL library stati
root@hett-PowerEdge-T30:/usr/local/src/nginx-1.9.8# ./configure --prefix=/usr/local/nginx --add-mod ...
- 如何在腾讯云上安装Cloud Foundry
Cloud Foundry是VMware推出的业界第一个开源PaaS云平台,它支持多种框架.语言.运行时环境.云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的 ...