jQuery砌体,百分比宽度

Question

有没有办法让jquery砌体使用百分比宽度div？我正在尝试创建一个25%,50%,75%和100%宽度的流畅布局.但是一旦我用%设置宽度,自动调整大小就会停止工作,如果我尝试手动触发mason onresize,我会得到舍入错误,使div跳转.它有时会忽略高度变得非常错误,有时只是停止放置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%;
}

任何输入的Muchos gracias,J

Answer 1

忘记.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 id="boxes" class="masonry clearfix"> 

和盒子

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

(请注意,Firefox可能导致比特问题,精确分频器为100,如25%,因此将框设置为24.9或24%)已过时.

使用box-sizing来避免下垂列问题.

Answer 2

我有同样的问题,尝试,尝试,尝试,这对我有用.

.masonry-brick {
   width:25%;/*or others percents*/

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}