Massoneria con elementi a larghezza intera

Question

Ho un problema con la massoneria, dove se ho bisogno di un elemento con larghezza del 100% e il resto della larghezza del 50%, il layout non mette più i miei elementi adiacenti l'uno all'altro. Quello che vorrei è che gli oggetti vengano visualizzati fianco a fianco come fanno quando non c'è un elemento di larghezza del 100%.

Ecco un violino js: 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

Massoneria richiede un columnWidth per determinare la larghezza delle colonne per esso per disporre i contenuti in, che può essere sia un valore in pixel diretta o un selettore per un elemento da misurare. Poiché columnWidth non è specificato nel codice, la Masonry imposta automaticamente il primo elemento nel contenitore della muratura per stabilire la larghezza della colonna. Poiché il tuo primo elemento è quello con larghezza del 100%, Massoneria lo misura e imposta la larghezza della colonna al 100%, motivo per cui i tuoi elementi di larghezza del 50% non vengono più visualizzati fianco a fianco (l'intero layout in muratura è effettivamente un singola colonna).

Ulteriori informazioni su questo comportamento in the Masonry docs for columnWidth.

---

Un modo per risolvere questo problema è quello di specificare un elemento che la Massoneria può misurare per stabilire la larghezza della colonna - in questo caso ho usato un elemento con la classe column-sizer, che ho dimensioni al 50% utilizzando CSS. La muratura quindi misura questo elemento per determinare la dimensione della colonna per il layout. Ho preso in prestito la tecnica da David Desandro's fluid columnWidth CodePen example.

Schermata di Risultato:

lavoro Demo Live:

$(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 Versione: https://jsfiddle.net/x9mf2c6x/