jQuery砌筑与百分比宽度

jQuery masonry with percentage width

本文关键字：百分比 jQuery      更新时间：2023-09-26

是否有办法让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%;
}

非常感谢任何输入，J

忘掉。weight这些东西，在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
        });
    });
});

改变holderdiv为

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

和

<div class="box">...</div>
(注意，Firefox可能会导致位数问题，例如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;添加到您的框

相关文章：