Javascript 带百分比宽度的jQuery砌体

有没有办法让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>

对于任何输入，

---

J

忘记.wight内容，只在css中添加此内容

.box{
宽度：25%；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}

我也有同样的问题，试了，试了，试了，试了，这对我来说很有效

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

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

---

如果您想要

25%

宽度而不是

24.9%

添加

左边距：-1px！重要的到您的框中
我遇到了相同的问题…使用css calc选项解决了它。这很好，但不是在调整窗口的大小，然后它变得有点疯狂

@media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}

所以你列出了html和css，但是你从来没有包含过实现这一点的js代码？这个属性可以解决问题！非常感谢你！我只在转换中添加了专有前缀。有没有不添加它们的原因？其他提示：在调用Mashesis时，不要将此属性与columnWidth属性一起使用constructor@frnhr，是的，您需要添加浏览器前缀以转换属性（如果您不使用带有此功能的post css）。不起作用。潜水艇一个接一个地叠在一起。注意：在所有Firefox、Chrome、Opera中。我会回答我自己的评论：计算列宽的函数应该在定义后立即使用（）调用。请参见此处更新的JSFIDLE：布局现在可以正常工作。
columnWidth
选项在最新版本中已更新为使用元素或选择器，这在基于%的网格中非常有效
@media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}