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= ...
随机推荐
- Java删除List指定元素
List<String> lists = new ArrayList<>(); list.add("123"); list.add("456&qu ...
- 1099 字串变换 2002年NOIP全国联赛提高组
1099 字串变换 2002年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 已知有 ...
- 解析C++普通局部变量与指针类型的对象变量的应用区别
首先我们先来了解一下MFC中的CPtrArray类,他可以说是CObject类型指针对象的集合.通过intAdd( CObject* newElement );注意参数是一个指针类型)可以向集合中添加 ...
- Hadoop集群_VSFTP安装配置
原作者写的太好了,我这个菜鸟不自觉就转载了,原文链接:http://www.cnblogs.com/xia520pi/archive/2012/05/16/2503864.html 如果,您认为阅读这 ...
- Java之instanceof
class Base{ int x = 1; static int y = 2; String name(){ return "mother" ...
- PHP-PHPExcel用法详解
以下文章来源:diandian_520 http://blog.csdn.net/diandian_520/article/details/7827038 1.header header(" ...
- iOS Block的本质(二)
iOS Block的本质(二) 1. 介绍引入block本质 通过上一篇文章Block的本质(一)已经基本对block的底层结构有了基本的认识,block的底层就是__main_block_impl_ ...
- 《算法图解》中涉及的算法的总结及java实现
该项目源代码已经放到Github上,有兴趣可以点击AlgorithmGraphExample 进行访问 项目启动,项目使用maven搭建,如果不使用maven导入,请保证有Junit4的jar包在工程 ...
- Android（java）学习笔记149：利用开源SmartImageView优化网易新闻RSS客户端
1.我们自己编写的SmartImageView会有很多漏洞,但是我们幸运的可以在网上利用开源项目的,开源项目中有很多成熟的代码,比如SmartImageView都编写的很成熟的 国内我们经常用到htt ...
- KissXML的XPath选取问题
XMPPFramework用的XML解析库还是大神自己写的KissXML,有些人生下来就是让人仰望的,哎. 进入主题,如下一段XML: <paramsxmlns="namespace& ...