整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于網站瀑布流布局對優化的影響
挺多人覺得瀑布流布局挺炫酷的都喜歡這樣做，那么瀑布流的布局對搜索引擎友好來說是怎樣的?
我們可以通過幾個瀑布流的網站來觀察。
http://www.toutiao.com/ 訪問該站會發現他們就是一個垂直的瀑布流布局，查看源代碼會看到他們的文章是在一個框架里面調用出來的，再查看一下百度快照會發現框架是沒有被抓取到的。因此說明他們的文章內容沒有被爬蟲抓取到。
http://abroad.ieduchina.com/
訪問該站的列表頁發現他們的文章也是用一個瀑布流布局展示的。當你點擊查看源代碼進去看的時候你會發現前面20篇文章是正常顯示調用的，也就是說是通過html代碼顯示出來的。而之后的文章而需要通過一個.php的文件調取。可以再打開百度查看一下該列表的快照能看到的也是前面20篇文章。所以說明瀑布流只能被爬蟲抓取到一小部分的內容，大多數是抓取不到的。
所以瀑布流在一些時候對用戶體驗來說可能是好的，但是對爬蟲來說卻是沒有分頁來的友好。特別是當列表頁下面的文章多了之后，分頁是可以在列表頁面給文章一個入口，更加有利于爬蟲對文章頁面的一個抓取。
文章原創www.laozhuseo.net
前端開發過程中，瀑布流大家都會遇到，接下來為大家推薦幾款實用的jQuery“瀑布流”插件，希望對你們有所幫助！
1.Masonry（用jQuery Masonry 插件創建瀑布流式的頁面；支持兼容）
2.waterfall(一款仿Pinterest網站的響應式無限動態加載圖片瀑布流特效jQuery插件。該瀑布流特效使用ajax調用來動態加載圖片，達到無限加載的效果。它使用簡單，兼容性好，值得推薦！)
3.Wookmark（是一個用來實現現在很流行的瀑布流的網頁布局效果的 jQuery 插件。使用該插件輕松實現瀏覽器和窗口的大小檢測，并自動對網頁的元素進行重新排版。）
4.picfixed（是一個等高且等寬瀑布流,可以讓圖片或者div輕松實現等高等寬瀑布流(這里的等寬是指行等寬)
5.minigrid（是一款javascript瀑布流插件，文件體積很小，特別適合移動端設備，DEMO2是結合 Dynamics.js 使用的）
6.Isotope（是一款效果非常神奇的元素分類過濾和排序布局jQuery插件，允許你以非常簡單和炫酷的方式來隱藏和顯示元素，以及對元素按照指定的規則進行排序。）
7.Pinterest Grid（該瀑布流插件使用簡單，可以隨父容器的大小自動調節網格布局，并且支持IE8+的IE瀏覽器。）
切版 qieban(.cn)
片文章介紹了三種Feed流中的圖片布局：宮格式布局、拼圖式布局、瀑布流式布局。
之前看了一篇文章：《Feed流設計：哪些謀殺你時間的APP》，通過Feed流可以讓用戶不停的刷信息，從而留住用戶更多的時間。在仔細研究你還會發現越來越多的APP都有Feed流，而且它們的圖片布局也不相同。
如果你沒有對其有深入研究，你根本不知道遇到這種頁面該如何設計。
下面通過查詢資料和對比不同的APP后，我將Feed流中的圖片布局總結起來有三種：
宮格式布局也就是九宮格布局，多用在社交類的APP中，九宮格圖片不僅能放進去很多內容，同時也能很好地引起網友的關注。
從上面案列可以看出：宮格式圖片布局大多用于社交發布動態的Feed流中，雖然他們都采用宮格式的布局，不過當發布的是一張圖片，其呈現的狀態還是有所差異。
以微信朋友圈為例：
未對屏幕進行區分，但對只上傳一張圖片進行了特殊的處理，二張或二張以上的圖片寬 x 高以150為閥值，二邊都大于150時，以較小的一邊為基準進行等比縮放。
具體的圖片排列情況如下圖：
1. 當圖片為三張時，3、5位置對調，排成一行：1、2、3；
2. 二張時排一行，1、2，格子大小提前就已經占好位置；
3. 單張圖片，如果0.5 <=寬 / 高 <=2 時，被限定在1—4格子的范圍大小（包括間距），也就是凡是寬高比在這個范圍時，最長的那邊暫兩個格子加間距；
4. 單張圖片，寬 / 高 > 2的圖片（如全景圖），最多占三欄，高最多占一欄（包括間距大小）；
5. 單張圖片，寬 / 高 < 0.5（如微博長圖），高最多占二欄，寬度最小占二欄1/3（包括間距）；
以上圖片適配規則適合大部分的社交類APP，其中略有不同的是，在單張圖片適配的時候，站酷采用了直接占兩格的方式，這取決于，站酷的圖片質量本來相對較高，同時尺寸上沒有微信、微博、QQ空間這么多。
這種布局方式是將幾個圖片拼成一個矩形，樣式新穎類似雜志的排版，因此也叫雜志式布局，不過因為其對圖片的要求較高，因此多應用在圖片社交中。
如：in、Nice。
雖然in和Nice都采用了拼圖的方式，不過在圖片布局上稍有不同。下面我就用一個簡單的圖將兩個圖片布局方式進行對比：
從上圖對比看：in和Nice最大的不同就是in的大圖比例更大，同時排版時多采用大圖搭配小圖的方式。
Nice雖然也采用了拼圖布局，不過其還是偏于保守，在4張圖和9張圖樣式時，均采用宮格式的布局，同時在其他樣式中，拼圖中主要的圖片采用3：2的比例，相對in來說圖片展示性稍遜，但是其優點是在展示圖片的同時，手機一屏可以顯示更多的內容。
瀑布流式布局是比較流行的一種網站頁面布局方式。視覺表現為參差不齊的多欄布局，最早采用此布局的是網站是Pinterest，后逐漸在國內流行。
隨著移動互聯網的發展，這種瀑布流布局也被用在了UI界面設計中。瀑布流式布局下，用戶的視線軌跡以 Z型為主，這樣的軌跡易于閱讀。
但由于用戶采用“就近原則” 閱讀信息，容易產生漏讀現象 。
因此，瀑布流式的布局適于應用在社區類瀏覽型頁面中，這樣的頁面往往信息量大，采用瀑布流式布局瀏覽體驗更為流暢。
但缺點則是信息不能完全被關注，容易漏讀信息。
上圖可以看到：在圖片收集的花瓣和視頻類的YY都用到瀑布流的形式，其優勢就是讓用戶不停的刷，缺點就是用戶很容易漏掉信息，因此這種適合泛瀏覽類的頁面。
參考鏈接：
https://www.cnblogs.com/meteoric_cry/p/5975165.html 《社交應用動態九宮格圖片的規則》
https://www.jianshu.com/p/eb02be5b7fd7 《仿 Nice 首頁圖片列表 9 圖樣式 (iOS)》
http://www.woshipm.com/pd/773523.html 《那些謀殺你時間的Feed流》
作者：風箏KK，公眾號：海鹽社
本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
