[英]jQuery masonry with percentage width
有没有办法让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
忘了.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来避免下垂列问题。
我有同样的问题,尝试,尝试,尝试,这对我有用。
.masonry-brick {
width:25%;/*or others percents*/
/*following properties, fix problem*/
margin-left:-1px;
transform:translateX(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); }}
如果你想要25%
宽度而不是24.9%
添加margin-left:-1px!important;
到你的盒子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.