异步加载技术实现瀑布流效果,异步加载技术瀑布_PHP教程

php中文网
发布: 2016-07-13 10:19:04
原创
1085人浏览过

异步加载技术实现瀑布流效果,异步加载技术瀑布

异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空。

滚动条事件要写在window.onscroll中才有效判断。如下:

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

奇布塔 41
查看详情 奇布塔
window.onscroll=function(){<br />    
       // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
        var tops =    $(document).scrollTop(); //获取滚动条的位置
        var sctop = $(document).height()-$(window).height();
        var id = $("#ajax_claid").val();
        if(!id){
             id=8;
        }
        $("#ajax_p").val(tops);
        if(tops>=sctop)//成立说明滚动条已在最底部
        {
            var b=$("#ajax_p").val();
            if(b>a){
                page=page+1;//传递页码
            }
            var Url = "aja_pro/"+id+"/"+page;//程序页面,查询信息返回数据,直接返回带html的信息。
        
            $.get(Url,function(data){
                $("#aja_jia").append(data);
            });
            
        }
    };
登录后复制

  

我的html页面过长,怎实现类似瀑布流效果?就是当浏览到底部时加载剩余部分内容?

①数据分成两部分,剩余部分放在一个JSON里,数据少的话可以放在js代码里。
②实现4列布局,建立几个ul作为页面起初的数据显示。
③通过判断最后一个li距离浏览器窗口的距离,触发函数将JSON中的数据以ul的形式遍历添加到页面中。
 

怎实现页面的异步加载?

说白了就是无刷新技术
jquery内库已经封装了ajax的效果 我们可以直接拿来用,.ajax .post .get .load
比如说一个点击方法
<script><br />$(function(){<br /> $("#id").click(function(){<br /> $.get("a.aspx",w:"abc",function(data){<br /> alert(data);<br /> });<br /> });<br />});<&#47;script><br/>  </script>

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/878812.htmlTechArticle异步加载技术实现瀑布流效果,异步加载技术瀑布 异步加载技术实现瀑布流效果。当滚动条到最底部的时候触发一个事件,这个事件写入...
PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号