jQuery Masonry構建pinterest網站佈局注意要點(轉)

在愚人碼頭的博客上看到有關於如何構建pinterest網站的文章，其實就是「圖片瀑布流顯示」，我試着在本地作了一個，沒有什麼問題，可是放到公司的網站上就問題多多。一是定位不許確，二是圖片顯示不完整。可是從新改變下窗口大小，顯示和位置都正常了，這說明第一次加載的時候，算的值不許，第一想到這個是加載順序的問題。想了個土方法，在body里加了onload，確實解決了第一次加載頁面顯示的問題，點擊顯示更多圖片的時候，出來的效果仍是算錯的，最後的解決辦法是給每一個圖片加上寬高，由於圖片都是從後來截取的，寬高都有數據。這個庫的應用能夠參照碼頭的：點擊

而後我再本身寫了一個根據屏幕寬度一行最多顯示圖片（web響應）且頁面居中的腳本。demo點擊這（改變你的窗口大小觀察自適應看效果）

寬屏顯示：

窄屏顯示：

由上圖對比能夠看到，中間部分始終居中，可是會根據屏幕的大小判斷一行最多顯示多少張圖片。讓框架居中有多種方法，最多見的是添加 margin：0 auto；

由於咱們要讓整個屏幕顯示至多張圖，因此我只要求得屏幕至多能放下多少個圖片後，剩下的數平均分給左右外邊距，這樣即能居中，例如：margin：10px auto

html代碼：

<div class="container" style="margin:0 auto;">
  <div class="aside"></div>
  <div class="photo_box">
   <div class="photo_img"><img src="1.jpg" alt="" width="" height="" /></div>
   <div class="photo_img"><img src="2.jpg" alt="" width="" height="" /></div>
  </div>
 ...
</div>

js代碼：

 $(document).ready($onresize = function(){
   var Winh = $(window).width(), Wimg = $(".photo_img").width() + 38,
Wsidebar = $(".aside").width() + 24;
	  var mainWidth = Winh - Wsidebar;
	  var imgBs = mainWidth % Wimg;  //imgBs爲最多放下圖片後剩下的餘數
	  var a = Math.floor( imgBs / 2); //餘數平分即爲外邊距大小
	  $(".container").css("margin-left", a );
	  $(".container").css("margin-right", a );

 })
   $(window).bind("resize", $onresize);

ps：有一個很重要的問題，必須給html強制滾動條，不然，在某些顯示器下，會出現切邊的效果，實際上是由於開始算屏幕寬度的時候，滾動條還沒加載出來，寬度會算多一點，這樣，這樣左右的外邊距大於實際邊距，就發生了切邊的效果。像這樣：html{ overflow:scroll; }

這個想法就像是小時候作的數學題，一塊多大面積的蛋糕，切成每份多大，最多能分給多少人，這裏只是加了一個居中的條件。而後當瀏覽器改變大小的時候，也會從新加載一次，算一次。而圖片的位移會使用Masonry.js這個庫的動態效果，整個過程很流暢，若是網速不限制，顯示的效果是很是好的。

再狠狠的點擊這個看這個效果吧：demo點擊這