2011-03-05 142 views
13

有誰知道如何從下往上製作jQuery砌體堆棧?我寫了一些基本的JS來從下往上堆疊東西,但是它不能做磚石砌體,比如在最短的柱子上堆砌下一塊磚塊,並且跨越多列。由於我對數學不太好,查看源代碼只會讓我頭暈目眩。jQuery砌體自下而上

Stacking from bottom up

任何人想試試嗎?

+4

如果你提出挑戰,你將不得不使標準更清晰,以確保你獲得參賽者。看起來有點兒可以向我解釋......塊子從哪裏來,它們可以是什麼尺寸和形狀,是平頂的理想目標?儘管我喜歡這個圖,並且+1是一個很酷的問題。 – Orbit 2011-03-05 19:54:56

+0

+1不錯的問題。其次是更多細節的要求。 – polarblau 2011-03-05 20:30:00

回答

19

你會嘲笑這是多麼容易,但你需要修改插件(demo)。

基本上,我改線82 - 85從這裏(所有需要的改變是topbottom,但我加了兩個,所以你可以來回切換):

var position = { 
     left: props.colW * shortCol + props.posLeft, 
     top: minimumY 
    }; 

這樣:

var position = (opts.fromBottom) ? { 
     left: props.colW * shortCol + props.posLeft, 
     bottom: minimumY 
    } : { 
     left: props.colW * shortCol + props.posLeft, 
     top: minimumY 
    }; 

然後添加在默認的選項:

// Default plugin options 
    $.fn.masonry.defaults = { 
    singleMode: false, 
    columnWidth: undefined, 
    itemSelector: undefined, 
    appendedContent: undefined, 
    fromBottom: false, // new option 
    saveOptions: true, 
    resizeable: true, 
    animate: false, 
    animationOptions: {} 
    }; 

現在你ç一個只使用插件像這樣:

$('#masonry').masonry({ fromBottom: true }); 

更新:我在GitHub上也forked the repository,這樣你就可以下載了變化,如果你不想做他們自己。

+0

超級棒!謝謝fudgey! 在另一個說明中,我添加了另一個父元素,這樣我可以將整個堆棧放置在該父元素的底部以模擬重力。 ([演示](http://aentan.com/test.html)) – 2011-03-06 01:57:50