javascript - 具有百分比宽度的 jQuery 砌体

Question

有没有办法让 jquery masonry 使用百分比宽度 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%;
}

非常感谢任何输入，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
        });
    });
});

将 holder div 更改为

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

和框到

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

(请注意，Firefox 可能会导致精确除法为 100 的位问题，例如 25%，因此请将框设置为 24.9 或 24%)已过时。

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