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％)过时.

使用框大小来避免列出问题.