全幅アイテムのある石積み

Question

1つの要素を100％の幅に、残りの要素を50％の幅にする必要がある場合、レイアウトによって要素が互いに隣接しなくなります。私が望むのは、100％の幅の要素がないときと同じように、アイテムが並んで表示されることです。 https://jsfiddle.net/ubmf47s4/2/

<div id="boxes" class="masonry clearfix"> 
    <div class="box box-fw" style="background: cyan;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: magenta;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: yellow;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: grey;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
</div> 

.box{ 
    width: 50%; 
    box-sizing:border-box; 
} 

.box-fw{ 
    width:100% 
} 

    $(function(){ 
    var container = $('#boxes'); 

    container.imagesLoaded(function(){ 
     //console.log("Images loaded!"); 
     container.masonry({ 
      itemSelector: '.box', 
      isAnimated: true 
     }); 
    }); 
}); 

Answer 1

石工が直接ピクセル値またはセレクタのいずれかとすることができる、それはであなたのコンテンツをレイアウトするために列の幅を決定するためにcolumnWidthを必要とします。ここでは

は、JSのフィドルです測定する要素。コードで columnWidthが指定されていないため、Masonryでは、デフォルトで、石積みコンテナの最初の要素を測定して列の幅を設定します。最初の要素は100％幅のものなので、Masonryはそれを測定し、列の幅を100％に設定します。これは、50％幅の要素が並んで表示されなくなる理由です（全石積みのレイアウトは効果的です単一カラム）。

この現象の詳細in the Masonry docs for columnWidth。この問題を解決する1つの方法は、石積みがあなたの列の幅を確立するために測定することができます要素を指定することです

---

- このケースでは、私は私が使用して50％にサイズ決めましクラスcolumn-sizer、持つ要素を使用しましたCSS。次に、この要素を測定してレイアウトの列サイズを決定します。私はDavid Desandro's fluid columnWidth CodePen exampleから技術を借りました。結果の

スクリーンショット：

ワーキングライブデモ：

$(function() { 
 
    var container = $('#boxes'); 
 

 
    container.imagesLoaded(function() { 
 
    //console.log("Images loaded!"); 
 
    container.masonry({ 
 
     itemSelector: '.box', 
 
     columnWidth: '.column-sizer', 
 
     isAnimated: true 
 
    }); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
} 
 
.box, 
 
.column-sizer { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 
.box-fw { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js"></script> 
 
<script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script> 
 

 
<div id="boxes" class="masonry clearfix"> 
 
    <div class="column-sizer"></div> 
 
    <div class="box box-fw" style="background: cyan;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: magenta;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: yellow;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: grey;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
</div>

JSFiddleバージョン：https://jsfiddle.net/x9mf2c6x/