JS+PHP瀑布流效果(二)
<!-- 加载商品 -->
<script>
//用户拖动滚动条,达到底部时ajax加载一次数据
var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on,来判断执行一次ajax请求
load=$("#loading").data("on");
arr=new Array();
$(window).scroll(function(){
if(load){
return;
}
var scrollTop=$(document).scrollTop();
var height=$(document).height()-$(window).height()-Math.random();
if(scrollTop > height){
$('.loading').css('display','block');
//加载更多数据
$("#loading").data("on", false);
loading.data("on", true).fadeIn(); //在这里将on设为true来阻止继续的ajax请求
//开始获取数据信息
var num = $('#main li').length;
var res=$.inArray(num,arr)
if(res==-1){
arr.push(num)
var newArr=unique(arr)
// console.log(arr)
var lastNum=newArr.pop()
jsonajax(lastNum);
}
}else{
loading.data("on", false).fadeIn();
}
})
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
function jsonajax(num){
// //开始获取数据信息
var data={num:num,where:'{$where}'};
$.ajax({
url:"{:U('Productlist/more')}",
type:'POST',
data:data,
dataType:'json',
success:function(json){
l=json.length;
// 由于是json数据,这里判定是否有数据信息
if(typeof json == 'object' && l>0){
var neirou,row,iheight,temp_h,html;//定义变量
var slist='<?php echo $slist["price"];?>';
for(var i=0;i<l;i++){
//将获得的json数据遍历
info = json[i];
// console.log(slist);
if(slist==''){
var price=info.purchase_price/(1-(info.rate_profit/100));
}else{
var slistfloat = parseFloat(slist);
var price=info.purchase_price/(1-(info.rate_profit/100));
price=slistfloat*price;
}
price=price.toFixed(2)
html = '<li class="iw-g-fore"><a href=""><div class="iw-g-fore-img"><a href="__APP__/Home/Product/detail/id/'+info.id+'"><img src="'+info.filepath+'_200x200.png" alt="产品图" /></a></div><div class="iw-g-fore-intro"><div><a href="__APP__/Home/Product/detail/id/{$product.id}"><h5>'+info.name+'</h5></a></div><div class="iw-good-price"><h6>'+price+'</h6><p>起订<i>'+info.moq+'</i></p></div></div></a></li>';
item = $(html).hide();// 这句话可以不要,因为这句话是将需要附加的html隐藏掉,以便可以附加下面的瀑布效果,如果不要这句话,下面的item修改成html即可
$("#main").append(html);//附加
item.fadeIn(1000);//产生渐现效果
}
}else{
$('.loading').html('没有更多了~~~');
}
}
});
}
</script>
JS+PHP瀑布流效果(二)的更多相关文章
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- js 图片瀑布流效果实现
/** * Created by wwtliu on 14/9/5. */$(document).ready(function(){ $(window).on("load",fun ...
- JS+PHP瀑布流效果
miai.php,代码如下: $link = mysql_connect("localhost","root",""); //连接数据库 $ ...
- 原生js实现瀑布流效果
参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ posit ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- JS 瀑布流效果
JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
随机推荐
- linux文本命令
1.find和grep find命令的作用是在目录中根据文件名搜索文件,grep命令的作用是在目录中根据文件内容搜索文件,find和grep的使用权限是所有用户. (1)find命令: find 列出 ...
- 单例模式获取JDBC连接
package com.jdbc.test; import java.io.IOException; import java.io.InputStream; import java.sql.Conne ...
- LeetCode之小孩分糖果
给定一群站好队的小孩而且按某项分值排名(姑且如果为年龄吧),年龄大的要比他身边年龄小的拿的糖要多.求怎么分配糖果使得分配的糖果数最少. 用一个数组从左到右再从右到左的遍历,向前遍历时若右边的比左边的大 ...
- Atitit.单向sso 单点登录的设计与实现
Atitit.单向sso 单点登录的设计与实现 1. 单点登录sso 的三大解决方案1 2. 新方案:密码管理器方案1 3. 调用方1 4. 自动登录登录2 5. 主页跳转2 1. 单点登录sso ...
- java gc日志详解
从 Full GC 信息可知,新生代可用的内存大小约为 18M,则新生代实际分配得到的内存空间约为 20M(为什么是 20M? 请继续看下面...).老年代分得的内存大小约为 42M,堆的可用内存的大 ...
- spring 第一篇(1-1):让java开发变得更简单(上)
1.释放POJOS能量 传统开发中是如何束缚POJOS呢,如果你开发过java很长时间,那你一定有接触过EJB的开发.那时候开发一个小小的功能都要扩展框架的类或者实现其接口.所以你很容易在早期的Str ...
- ZOJ 3962 Seven Segment Display 16进制的八位数加n。求加的过程中所有的花费。显示[0,F]有相应花费。
Seven Segment Display Time Limit: Seconds Memory Limit: KB A seven segment display, or seven segment ...
- 【转】支付宝WAP支付接口开发
支付宝WAP支付接口开发 因项目需要,要增加支付宝手机网站支付功能,找了支付宝的样例代码和接口说明,折腾两天搞定,谨以此文作为这两天摸索的总结.由于公司有自己的支付接口,并不直接使用这个接口,所以晚些 ...
- spark 1.3 发布了
悄悄地,spark 还是像往常一样,发布了1.3版本,从release notes可以看出,这一版本比较大的变化是1. 增加了DataFrame API,这样以后操作一些结构化的数据集时将会变的非常方 ...
- Servlet 国际化
在我们开始之前,先来看看三个重要术语: 国际化(i18n):这意味着一个网站提供了不同版本的翻译成访问者的语言或国籍的内容. 本地化(l10n):这意味着向网站添加资源,以使其适应特定的地理或文化区域 ...