jQuery砌体，百分比宽度 [英] jQuery masonry with percentage width

问题描述

有没有办法让jquery砌体使用百分比宽度div？
我正在尝试创建一个25％，50％，75％和100％宽度的流畅布局。但是一旦我用％设置宽度，自动调整大小就会停止工作，如果我尝试手动触发mason onresize，我会得到舍入错误，使div跳转。它有时会忽略高度变得非常错误，有时只是停止放置div并将它们全部放在0,0

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

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

Muchos gracias for any input, J

推荐答案

忘记.wight的东西只在css中添加这个

forget the .wight stuff add only this in css

    .box {
      width: 25%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

masonry js

masonry 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更改为

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

和方框

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

（请注意，Firefox可能导致比特问题，精确分频器为100，如25％所以设置框为24.9或24％）过时。

( note that Firefox might cause bit issue with exact divider of 100 like 25% so set the boxes at 24.9 or 24% )outdated.

使用大小调整以避免下垂列问题。

Use box-sizing to avoid drooping column issue.

这篇关于jQuery砌体，百分比宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！