瀑布流 無限翻頁 帶來的問題

2022-09-14 01:30:10 字數 679 閱讀 2322

比起傳統翻頁,瀑布流式翻頁現在越來越火。來看一下區別

1. 傳統翻頁:

每次翻頁都會重新渲染乙個全新的頁面,如論壇。

解決方法: 無,傳統分頁就這樣。

2. 瀑布流:

問題: 如果翻頁時資料發生變動,將會在同乙個頁面出現重複資料,想一下前面說的論壇的場景。

解決方法:

1. 客戶端去重

客戶端記錄之前載入的資料,在獲得新資料後,客戶端去重。

缺點: 去重後資料會少,比如新資料獲得10條,其中有2條重複的,最後只載入了8條,且順序無法保證。

優點: 服務端**不用改動。

2. 修改分頁邏輯

如朋友圈,其是按朋友圈的發布時間排序的,且發布時間永遠不可變。因此只需取當前頁面最後一條發布時間的下10條資料即可。

即將

select * from posts where username='licong' limit 10

修改為

select * from posts where username='licong' and publish_time > :time limit 10

優點: 簡單,有效

缺點: 限制極為苛刻,資料必須按照乙個固定不變的屬性排序,比如前面說的發布時間。試想論壇這個場景,帖子最後頂帖時間是可變的,如果用這個邏輯去做,會導致有一些帖子永遠不可見。

瀑布流 無限載入效果

缺點 影響效能 主要實現步驟 1.區分第一行和後面的行 2.第一行浮動 3.獲取第一行所有的高度 4.找到最小高度的 5.後面進行定位 6.定位到上一行最矮的位置下 7.修改當前最小值 後面的一次加上最矮的高度 8.從步驟4開始迴圈 css cont 這裡不用margin是因為offset識別不了m...

Masonry Ajax 實現無限重新整理瀑布流

原文 效果就如我的個人站yooao.cc 把我實現的思路分享給大家。masonry渲染頁面如果有時需要imagesloaded輔助,不然有可能會造成布局重疊。乙個大體的思路 前端取得最後一篇文章的id,下拉時進行ajax請求新增文章進布局,並同時更新最後一篇文章的id,這樣就可往復迴圈實現無限瀑布流...

Yii URL格式化帶來的翻頁引數問題

urlmanager array urlformat path showscriptname true,rules array view 問題 1 使用zii.widgets.clistview列表顯示,clistview預設使用clinkpager 但是頁面下方翻頁按鈕url為 http host...