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 ...
随机推荐
- 用尽洪荒之力整理的Mysql数据库32条军规(转)
今天上午吐血整理了Oracle SQL性能优化的40条军规,其中很多规则也是适用于Mysql的,结果今晚发现这一篇文章——用尽洪荒之力整理的Mysql数据库32条军规,和我的竟有异曲同工之妙,当然不同 ...
- css之定位学习
如需转载烦请注明出处: 英文原文:http://www.vanseodesign.com/css/css-positioning/ 中文译文:http://www.w3cplus.com/blog/p ...
- 转 iOS:NSAttributedString
NSAttributedString: http://blog.csdn.net/kmyhy/article/details/8895638 CTFramesetterSuggestFrameSize ...
- CentOS设置程序开机自启动的方法
转自:http://www.centos.bz/2011/09/centos-setup-process-startup-boot/ 在CentOS系统下,主要有两种方法设置自己安装的程序开机启动. ...
- Redis(四):常用数据类型和命令
命令手册网址 http://doc.redisfans.com/ Redis数据类型 l String l Hash l List l Set l Sorted Set Redis中还有3种特殊的数据 ...
- Atitit.biz业务系统 面向框架 面向模式---------数据映射imp
Atitit.biz业务系统 面向框架 面向模式---------数据映射imp 1.1. 面向变量 面向过程 面向对象 面向组件 面向框架 面向服务 面向模式1 1.2. 第2章 架构模式 ...
- 设计模式中类的关系之依赖关系(Dependence)
依赖关系是一种使用关系,特定事物的改变有可能会影响到使用该事物的其他事物,在需要表示一个事物使用另一个事物时使用依赖关系.可以简单的理解,就是一个类A使用到了另一个类B,而这种使用关系是具有偶然性的. ...
- mysql explain22222 system > const > eq_ref > ref > fulltext > ref_or_null > index_merge > unique_subquery > index_subquery > range > index > ALL
MySQL性能分析及explain用法的知识是本文我们主要要介绍的内容,接下来就让我们通过一些实际的例子来介绍这一过程,希望能够对您有所帮助. .使用explain语句去查看分析结果 如explain ...
- EXCEL VBA代码,实现点击Sheet1按钮控件保存不连续单元格的数据到Sheet2中,然后清空输入内容
Private Sub SaveAndClear() Dim Header, Deatil, Order As Range Dim lastrow1, lastrow2 As Long Dim i A ...
- Struts2 是什么?
Struts2是流行和成熟的基于MVC设计模式的Web应用程序框架. Struts2不只是Struts1下一个版本,它是一个完全重写的Struts架构. WebWork框架开始以Struts框架为基础 ...