<!-- 加载商品 -->
<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瀑布流效果(二)的更多相关文章

  1. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  2. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  3. js 图片瀑布流效果实现

    /** * Created by wwtliu on 14/9/5. */$(document).ready(function(){ $(window).on("load",fun ...

  4. JS+PHP瀑布流效果

    miai.php,代码如下: $link = mysql_connect("localhost","root",""); //连接数据库 $ ...

  5. 原生js实现瀑布流效果

    参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ posit ...

  6. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  7. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  8. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

随机推荐

  1. (二)EasyUI 使用——常用组件

    1. EasyUI常用组件的基本用法 1.1 layout布局 <!-- 布局面板 大小自适应父容器 --> <div data-options="fit:true&quo ...

  2. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  3. iOS机型适配

           机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的 ...

  4. RAD Studio XE5破解补丁及方法

    通过测试可用,RAD Studio XE5破解补丁及方法 第一步,将下载下来的“delphicbuilder_xe5_win.iso”解压到任意盘,任意目录. 第二步,将“免序列号安装授权文件”文件夹 ...

  5. Blocking & Nonblocking module

    /*************************************************** /  Blocking and Nonblocking circuit and Simulat ...

  6. 83. Remove Duplicates from Sorted List【easy】

    83. Remove Duplicates from Sorted List[easy] Given a sorted linked list, delete all duplicates such ...

  7. cmake工程使用distcc

    distcc可以加速编译,但是遇到cmake可能就需要处理下. 问题 distcc在 /usr/lib/distcc 中放了各编译器的soft link(如cc/gcc等等),如果 /usr/lib/ ...

  8. Python 2.7 中使用 Print 方法

    print ("test",file=name)类似的方法在python 2中需要先引入 __future__才可使用 import __futhure__ import prin ...

  9. mysql 索引优化,索引建立原则和不走索引的原因

    第一:选择唯一性索引 唯一性索引的值是唯一的,可以更快捷的通过该索引来确定某条记录. 2.索引的列为where 后面经常作为条件的字段建立索引 如果某个字段经常作为查询条件,而且又有较少的重复列或者是 ...

  10. cookie做订单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...