搜尋
首頁php教程php手册异步加载技术实现瀑布流效果,异步加载技术瀑布

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

Jun 13, 2016 am 09:25 AM
載入實現底部非同步科技效果捲動

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

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

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

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>

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具