javascript – 具有百分比寬度的jQuery磚石

有沒有辦法得到jquery磚石工作與百分比寬度divs？

我正在嘗試建立一個25％,50％,75％和100％寬度的流體佈局.但是,一旦我設定寬度與％自動調整大小停止工作,如果我嘗試手動觸發mason onresize我得到四捨五入的錯誤,使divs跳轉.而且,它有時會忽略高度,有時候會停止放置div並將它們全部放在0,0上

HTML標記：

<div class="boxes">
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-2">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-3">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
</div>

CSS屬性：

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

對於任何輸入,

Ĵ

忘了.wight的東西只新增這個在css

.box {
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

磚石js

$(function(){
var container = $('#boxes');

container.imagesLoaded(function(){
container.masonry({
itemSelector: '.box',
columnWidth: function( containerWidth ) {
return containerWidth /4;// depends how many boxes per row
}(), // () to execute the anonymous function right away and use its result
isAnimated: true
});
});
});

更改持有人div到

<div id="boxes" class="masonry clearfix">

和盒子

<div class="box">...</div>

(請注意,Firefox可能會導致位錯誤,精確分隔符為100,如25％,因此將框設定為24.9或24％)過時.

使用框大小來避免列出問題.