<!-- 加载商品 -->
<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. hdu3415 Max Sum of Max-K-sub-sequence 单调队列

    //hdu3415 Max Sum of Max-K-sub-sequence //单调队列 //首先想到了预处理出前缀和利用s[i] - s[j]表示(j,i]段的和 //之后的问题就转换成了求一个 ...

  2. 关于jQuery库的引用

    2018-08-06 10:28:38 1. 经过几次试坑,发现最简便的方法就是直接在官网上下载  jQuery文件 . 2. 官网上有两个下载版本,一个是经过压缩的(用于发布),一个是没有经过压缩的 ...

  3. linux ipvsadm安装

    cd /usr/src/ wget http://www.linuxvirtualserver.org/software/kernel-2.6/ipvsadm-1.24-6.src.rpmrpm -i ...

  4. 联想电脑Win8升级win10后Wlan关闭无法开启解决办法

    官网下载电源驱动,下载无线网上驱动 开启电脑 按fn+f5 电源管理界面就出来了 把无线网卡打开 就ok了 这样就开启了无线! 如果还不行,可进行如下尝试,希望有所帮助: 1.开机进bios(一般是按 ...

  5. php使用N层加密eval gzinflate str_rot13 base64 破解方法汇总

    php使用N层加密eval gzinflate str_rot13 base64 破解方法汇总 来源:本站转载 作者:佚名 时间:2011-02-14 TAG: 我要投稿 PHP使用eval(gzin ...

  6. 关于public class

    初学问题:“The public type movietestdive must be defined in its own file” 对于一个class里,只能出现一个public class(公 ...

  7. hdu1873 看病要排队 优先队列

    看病要排队 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  8. deepin下安装python的Tkinter库

    在Linux下,如果需要编写界面应用,并且此界面应用对性能的要求不是很高,一般可以使用Python解决.Python中可以使用自带的Tkinter库或者是第三方的Wxpython库,当然Tkinter ...

  9. 源代码分析Fragmentd的BackStack管理过程

    1. Fragment基本使用方法 为了管理Activity中的fragments.须要调用Activity中的getFragmentManager()方法.由于FragmentManager的API ...

  10. export,source

    source会把定义在脚本文件中的变量放在当前shell中 export会把变量放在他所在的shell进程以及子进程shell中 子shell进程可以访问父shell进程的export 声明的变量,但 ...