jQuery Masonry動態頭寬度

Question

所以我試圖做一個頭重新調整到jQuery砌體網格的當前寬度。

我的工作示例是在這裏：http://jsfiddle.net/hGnLH/

我試圖完成類似的影響到這個網站：http://citizenmag.citizenm.com/（我想報頭只一樣寬的砌體網格和重新大小時，用戶更改瀏覽器寬度）

任何幫助/建議將不勝感激。

Answer 1

這並不是那麼複雜。看看你的小提琴的this update。

下面是相關的JS：

$(function() { 
    $("#inner").masonry({ 
     columnWidth: 230, 
     gutterWidth: 15, 
     isAnimated: true, 
     cornerStampSelector: ".corner-stamp" 
    }); 

    $(window).resize(function() { 
     var totalColWidth = $("#inner").outerWidth() - 475; 
     var columns = parseInt(totalColWidth/245); 

     $("#header").animate({width:(columns*245) + 475},{duration:300, queue:false}); 

    }); 
}); 

在窗口調整它的大小計算「欄部分」的寬度，這意味着#inner寬度減去大的圖像寬度。通過這一點，我們可以通過將其除以曼尼列寬度加上溝槽寬度來獲得列數。有了列號，我們可以將它乘以245（砌體列寬+排水溝寬度）並獲得預期的頁眉寬度。我們製作頭部的動畫並完成。