pCloud Partner Program

Masonry自動排版介面與InfiniteScroll無限捲動介面

程式技術/Javascript 2012/05/09 09:57
views: 210711 times
Masonry 和 InfiniteScroll 都是 jQuery 上的 plugin!

Masonry 是利用 css 方式, 將介面重新排版, 使得畫面不會因為不規則區塊排起來而不好看, 可以看一下 Masonry 官網上的說一看就知道這樣的排版方式的感覺:

http://masonry.desandro.com/

而 InfiniteScroll 則是利用 jQuery 背後 ajax 方式, 將一頁一頁的網頁, 透過不換頁, 直接 append 到目前的頁面上, 達成向下捲動而看更多內容的功能. 像是 facebook 動態牆, 就是這樣的應用情境. 官方網站:

http://www.infinite-scroll.com/

這兩個功能結合就變成了這樣: http://sample.diary.tw/flickrsearch/?q=rainbow (利用了 flickr api 與 Masonry 和 InfiniteScroll 做出的效果. (記得要向下捲動, 才會出現看完了繼續產出內容的效果), 其中後面的 q 可以自行替代其他的英文單字, 因為對該文字沒有特別處理, 所以只能使用一個英文單字.

來看看怎麼做這個效果吧.

InfiniteScroll 是利用了 jQuery 在背景取出下一頁的內容, 並將指定的 selector 資料 append 到目前的網頁上, 所以最小的程式碼是這樣:



就是將本頁的容器, 利用 infinitescroll 函式呼叫, 並傳入 3個重要參數, 分別為 navSelector, 這個是指當 page 瀏覽到這個 selector 指定物件時, 進行 load 下一頁內容, 而要 load 的內容, 就是 nextSelector 的物件中的 url, 至於第三個參數 itemSelector 則是 load 到網頁後, 要帶出來放到目前頁面上的內容項目.

以上面的例子來看, 網頁的介面會是如下:


這樣一來, 當本頁被瀏覽最下面的 <div class='navigation'> 時, 就會被觸發去 load page-2.htm 中的內容,並找出 <div class='post'>...</div> 將內容放到 <div id='content'>..</div> 中最後一個 post, 如此重覆下去, 就會有往下捲而一直往後看的內容, 記得每頁下面都要放對應的下一頁, 就會被 infinitescroll 偵測到, 並往下疊代下去.

再來看看 Masonry 的效果, 用法也很單純, 最小程式碼如下:


只需要指定要排版的容器 container, 呼叫 masonry 傳入 itemSelector 就是內容元素, 就可以自動排版, 多種效果可以參考官方網站的 demo.

比較特別的是兩者結合的這個 demo: http://masonry.desandro.com/demos/infinite-scroll.html , 參考這個 demo 可以做出又達成自動排版, 又達成無限捲動的功能, 效果就參考上面的 sample: http://sample.diary.tw/flickrsearch/?q=rainbow

幾個點要注意:
1. navSelector 一定是要找最下面的物件, 效果才會好, 記得.
2. 若是排版內容有圖, 可以參考 Masonry 的 sample: http://masonry.desandro.com/demos/images.html 將排版呼叫寫在 container 的 imagesLoaded 事件後, 如下:

才不會有位置算不準的狀況.
3. 若要有動畫排版效果, 可以在 Masonry 參數中多加上 isAnimated: true;
4. 排版若要美觀, 要盡量統一內容物寬度, 就不會排得2266 (可以利用 css 自行安排)
5. InfiniteScroll 的 loading 的 css 是 #infscr-loading 這個, 可自行設計.

忘了說, 這次 sample 使用的 flickr api 是 photo search: http://www.flickr.com/services/api/flickr.photos.search.html

這種 layout 流行和 fb 及最近火紅的 pinterest 網站可能有很大的關係呢.
top

Trackback Address :: http://diary.tw/tim/trackback/994

  1. rex 2013/12/06 12:59 MODIFY/DELETE REPLY

    請問一下

    我照此方法製作的

    但是當我去抓page頁 若資料為空

    但她還是append一個空的物件回我的瀑布流

    不會顯示出 "沒有數據了"

    • Timothy 2013/12/16 09:33 MODIFY/DELETE

      理論上應該是在該 page 上沒有 item 的狀況下, 就算是結束, 若網頁是空, 也是一樣的, 和沒有 item 的狀況相同, 都會顯示沒有更多資料的訊息才對.

Write a comment


PREV : [1] : ... [148] : [149] : [150] : [151] : [152] : [153] : [154] : [155] : [156] : ... [462] : NEXT



Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...