Javascript 具有百分比宽度的 jQuery 砌体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8446061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery masonry with percentage width
提问by joe_g
is there a way to get jquery masonry working with percentage width divs? I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually trigger mason onresize I get rounding errors that makes the divs jump around. Also it becomes quite buggy that it sometimes ignores the height, and sometimes just stops placing the divs and put them all on 0,0
有没有办法让 jquery masonry 使用百分比宽度 div？我正在尝试创建宽度为 25%、50%、75% 和 100% 的流体布局。但是，一旦我用 % 设置宽度，自动调整大小就会停止工作，如果我尝试手动触发 mason onresize，我会得到舍入错误，使 div 跳来跳去。此外，它有时会忽略高度，有时会停止放置 div 并将它们全部放在 0,0 上，这变得非常错误
HTML markup:
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 properties:
CSS 属性：
.weight-1 {
width:25%;
}
.weight-2 {
width:50%;
}
.weight-3 {
width:75%;
}
.weight-4 {
width:100%;
}
Muchos gracias for any input, J
任何输入的Muchos gracias，J
回答by Benn
forget the .wight stuff add only this in css
忘记 .wight 的东西，只在 css 中添加这个
.box {
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}masonry js
砌体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
});
});
});
change holder div to
将持有人 div 更改为
<div id="boxes" class="masonry clearfix">
and boxes to
和盒子
<div class="box">...</div>
( note that Firefox might cause bit issue with exact divider of 100 like 25% so set the boxes at 24.9 or 24% )outdated.
（请注意，Firefox 可能会导致 100 的精确分隔符出现位问题，例如 25%，因此将框设置为 24.9 或 24%）过时。
Use box-sizing to avoid drooping column issue.
使用 box-sizing 来避免下垂的列问题。
回答by Darlan Mendon?a
i have same problem, try, try, and try, and this work for me.
我有同样的问题，尝试，尝试，再尝试，这对我有用。
.masonry-brick {
width:25%;/*or others percents*/
/*following properties, fix problem*/
margin-left:-1px;
transform:translateX(1px);
}
回答by Christian Schr?ter
I had the same problem … solved it with css calc option. That works fine, but not on resizing the windows, then it gets a bit mad …
我有同样的问题……用 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); }}
回答by Paul Kowalik
If you want 25%width not 24.9%add margin-left:-1px!important;to your box
如果您不想将25%宽度24.9%添加margin-left:-1px!important;到您的框中
