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 ...
随机推荐
- jumpserverv0.5.0 基于 CentOS7安装部署
基于 CentOS 7 一步一步安装 Jumpserver 0.5.0 环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux和防火墙 # CentOS 7 $ ...
- 记一次SmtpClient发送邮件引发的系列问题
前提:公司同事离职,我接手同事负责的项目. 事件:某天公司的分析人员,说软件中的邮件发送功能不能使用,总是提示"邮件发送失败". 本地能够正常发送,发布WCF到服务器IIS上,再调 ...
- css3 animation steps制作饿了么loading
html代码 <!DOCTYPE html> <html> <head> <title></title> </head> < ...
- Atitit. 订单管理 收银单持久化 功能设计 基于ecshop订单结构
Atitit. 订单管理 收银单持久化 功能设计 基于ecshop订单结构 1. 54.order_info 订单 数据结构1 2. Ecshop 的订单api1 2.1. 生成订单 code b ...
- CCS调试教程
包括CCS3.3和CCS5.5两个版本的调试教程. CCS3.3 3.3教程来自http://zhujlhome.blog.163.com/blog/static/205621092201261032 ...
- TCP/IP的三次握手与四次挥手详解
TCP((Transmission Control Protocol)传输控制协议,是一个面向连接的协议.在运用此协议进行数据传输前都会进行连接的建立工作(三次握手):当数据传输完毕,连接的双方都会通 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- Spring MVC3.0.5搭建全程
http://aokunsang.iteye.com/blog/1279322 ——————————————————————————————————————————————————
- 【EasyUI】Tabs常用操作及href和content的异同
说明:EasyUI版本1.3.4 ,jQuery版本1.8.3 EasyUI Tabs常见使用方式 按照官方文档的说法,创建Tabs的方式有两种: 静态页面标签 动态JS代码 静态方式主要用于创建一些 ...
- 问题解决 —— Http Status 500
在完成JavaWeb项目的过程中经常会出现这种错误 500:指的是服务器内部错误 通常遇到这种情况,我会去看控制台的信息,那里肯定会有提示,空指针(值没有传过去),或者java.sql.SQLExce ...