pCloud Partner Program

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

程式技術/Javascript 2012/05/09 15:57
views: 226067 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. Tracked from clock dials 2017/12/04 02:28 DELETE

    Subject: clock dials

    Get the greatest option for clock inserts now in stock and on sale but you must get it today!
  2. Tracked from clock movements 2017/12/07 21:11 DELETE

    Subject: clock movements

    See the top available clock inserts that are in stock plus at the best price but you must get it today!
  3. Tracked from Hand painted wallpaper 2017/12/09 04:58 DELETE

    Subject: Hand painted wallpaper

    See professional Mural wallpaper for sale that's now in stock plus on sale today!
  4. Tracked from school bell systems 2017/12/10 06:50 DELETE

    Subject: school bell systems

    See top quality school bell systems that are now in stock plus at the best price now!
  5. Tracked from View More 2017/12/12 15:34 DELETE

    Subject: View More

    See the best propane fire pit burner that's available and currently available now!
  1. rex 2013/12/06 19:59 MODIFY/DELETE REPLY

    請問一下

    我照此方法製作的

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

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

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

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

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

Write a comment


PREV : [1] : ... [159] : [160] : [161] : [162] : [163] : [164] : [165] : [166] : [167] : ... [473] : NEXT



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


 Waiting...