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 ...
随机推荐
- jumpserver-v0.5.0 应用图解
一. Jumpserver启动 Python: 版本 3.6 1.1 启动Jumpserver 先进入Python虚拟环境 [root@localhost ~]# source /opt/py3/bi ...
- PHP多线程处理问题
近日工作中涉及到项目同时处理多个线程问题时,在网上找到了PHP的pthreads扩展以及curl_multi_init函数,具体如下: 一 .windows下安装php真正的多线程扩展pthreads ...
- CentOS-6.*安装配置SVN
安装说明 系统环境:CentOS-6.3 安装方式:yum install (源码安装容易产生版本兼容的问题) 安装软件:系统自动下载SVN软件 检查已安装版本 #检查是否安装了低版本的SVN [ro ...
- 组播和广播的概念,IGMP的用途
1.组播和广播的概念 1) 组播 主机之间的通讯模式,也就是加入了同一个组的主机可以接收到此组内的所有数据,网络中的交换机和路由器只向有需求者复制并转发其所需数据. 主机可以向路由器请求加入或退出某个 ...
- Linux Ctrl+z bg fg jobs命令使用
一.暂停前台运行时间长的程序 使用Ctrl + z然后可以看到系统提示: []+ Stopped /home/test/demo.sh 二.bg命令 将程序放到后台处理 bg %jobnumber ...
- springboot+thymeleaf打war包在外部tomcat运行
工程目录 pom文件注意点 <packaging>war</packaging> <dependency> <groupId>org.springfra ...
- 使用sklean进行多分类下的二分类
#coding:utf-8 import matplotlib.pyplot as plt import numpy as np from sklearn.linear_model import Lo ...
- linux管理员工具
htop 任务管理器 bmon 网络监控 ### 详情 --------------------------------------------------- htop 任务管理器 bmon 网络监控
- mysql存在就更新,不存在就新增
INSERT INTO newest_log_operation( ACTION, OPERATION, KEY_VALUE, BUS_KEY, CONTENT, USER_ID, VERSIO ...
- iOS10 获取系统通讯录新方法
#import <ContactsUI/ContactsUI.h> 遵循代理 CNContactPickerDelegate 调用通讯录 如果在iOS10的机器上调用以前的ABPeople ...