ajax瀑布流例項

2021-08-16 11:04:15 字數 633 閱讀 7262

瀑布流:效果分為兩類:

接下來我們主要針對第一種固定列數的情況進行詳細的說明

接下來我主要介紹的是第一種方式

原理:通過ajax從後台獲取資料,然後利用dom操作新增到頁面中。並且每次新增的時候將新增到li高度最小的上面,當滾動條滾動的距離與頁面可視區距離之和大於li高度最小的高度與其頂部到body頂部距離之和時,開始載入下一屏資料

下面是整個實現過程的**,後面會進行部分解釋

html**

css**

js**

封裝好的利用ajax獲取後台資料的**

function ajax(method, url, data, success)  catch (e) 

if (method == 'get' && data)

xhr.open(method,url,true);

if (method == 'get') else

xhr.onreadystatechange = function() else

} }}

原生ajax瀑布流demo

最近聽朋友們說起瀑布流挺多的,自己就去研究下了,乙個簡單的原生demo,分享給大家.簡單分為三個文件,有詳細的注釋 img ajax.php demo.php 其中img資料夾中放入 1.jpg 2.jpg 3.jpg.ajax.php頁面 模擬從資料庫讀取資料 arr array op opend...

ajax學習筆記之瀑布流

此為列數固定的瀑布流 就是無論放大縮小瀏覽器百分比 列數不變 是比較簡單的版本 學習用 這篇只是適合我自己記憶的筆記 可能不是適合所有人 隨意看看就好 布局很簡單 就是乙個ul下4個li 個數可隨意 主函式部分 請求來的資料data格式是乙個陣列中包含了多個物件 乙個物件既包含了src和寬高和介紹等...

原生ajax瀑布流demo分享 必看篇

最近聽朋友們說起瀑布流挺多的,自己就去研究下了,乙個簡單的原生demo,分享給大家.簡單分為三個文件,有詳細的注釋 img ajax.php demo.php 其中img資料夾中放入 1.jpg 2.jpg 3.jpg.ajax.php頁面 arr array op opendir img 開啟目錄...