web-dev-qa-db-ja.com

パーセンテージ幅の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>

CSSプロパティ：

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

任意の入力のためのMuchosgracias、J

javascriptjquery-masonry
15
joe_g

.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をに変更

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

とボックスに

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

（Firefoxは25％のような100の正確な分周器でビットの問題を引き起こす可能性があることに注意してください。ボックスを24.9または24％に設定してください）古い。

列の垂れ下がりの問題を回避するには、ボックスサイズを使用します。

12
Benn

私は同じ問題を抱えています、試してみて、試してみてください、そしてこれは私のために働きます。

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

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}
8
Darlan Mendonça

私は同じ問題を抱えていました…csscalcオプションでそれを解決しました。それは問題なく動作しますが、ウィンドウのサイズを変更することではなく、少し怒ってしまいます…

@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); }}
1
Christian Schröter

25%ではなく24.9%幅が必要な場合は、ボックスにmargin-left:-1px!important;を追加してください

0
Paul Kowalik