無限下拉的資料呈現 (類似FaceBook，分頁效果) #2 - 圖片版的首頁

新瓶裝舊酒（jQuery + Web Service）類似臉書（FaceBook），您一直向下閱讀資訊。到了瀏覽器底部又會長出（呈現出）新的數據。

這也是一種「分頁」的技巧。這次改用「圖片」呈現。

首頁上，無窮無盡的圖片一直向下拉（向下閱覽）

請您先看上一篇文章：

無限下拉的資料呈現（文字版）

http://mis2000lab.blogspot.tw/2016/12/facebook1-jquery-web-service-repeater.html

........................................................................................................

有讀者來信詢問這個網頁的效果
http://www.andenhud.com.tw/products/sale_products_list.php?cid=184
（若您上班時點閱，請注意！上面是 女性內衣 的購物網站）

或是 手錶的購物網站 https://tw.buy.yahoo.com/activity/onsale?actid=42332&co_servername=yahooC160524_440_1a101a

您不斷向下拉、向下閱讀
產品 "圖片"會不斷跑出來，類似臉書（FaceBook）無限下拉的資料呈現

我不知道他是怎麼做的？

但如果您想要有類似的效果（特效）

只要把之前的範例（有 Youtube教學影片 & 範例下載）從原本的 "文字"呈現，改成 "圖片"呈現而已。

YouTuber教學影片  https://youtu.be/h5Zof9ZZRP4

範例與文章說明：無限下拉的資料呈現 (類似FaceBook，分頁效果) - jQuery + Web Service + Repeater控制項
https://dotblogs.com.tw/mis2000lab/2016/02/23/webform_infinite_scroll_endless_scroll_jqeury_webservice

原本的範例（上一篇文章），您不斷向下拉，就會有新文字、新文章出現
現在改成「您不斷向下拉，出現的是 "圖片"」罷了

您可以搭配書本的範例資料表  FileUpload_DB
稍微修改上面文章的範例，就能搞定。

抱歉！因為程式碼貼上後，版面錯亂，所以貼圖展示。

若您要察看程式碼，也可以到此參考 --  http://mis2000lab.pixnet.net/blog/post/34529725-%E7%84%A1%E9%99%90%E4%B8%8B%E6%8B%89%E7%9A%84%E8%B3%87%E6%96%99%E5%91%88%E7%8F%BE%20(%E9%A1%9E%E4%BC%BCFaceBook%EF%BC%8C%E5%88%86%E9%A0%81%E6%95%88%E6%9E%9C)%20#2%20-%20%E5%9C%96%E7%89%87%E7%89%88%E7%9A%84%E9%A6%96%E9%A0%81

..........（後續省略）......

3.  後置程式碼，僅修改資料表名稱、SQL指令即可。            

本範例不提供程式下載了

      原始範例來源：http://www.aspsnippets.com/Articles/Implement-Infinite-Scroll-Endless-Scroll-in-ASPNet-using-jQuery-AJAX.aspx 

      您可以先到原網站看看 Demo效果。VB & C#範例都有。

      原作者使用 SQL 2005起的「資料分頁 - Row_Number」來做，搭配 Repeater控制項 + Web Service + jQuery三者，算是一個整合範例。

      我改用SQL 2012的 OFFSET...FETCH 來做分頁

  

我將思想傳授他人， 他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net

................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................   Google+   https://plus.google.com/100202398389206570368/posts ........

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ