alignement css pour la disposition de maçonnerie

Question

J'ai essayé masonry.js pour créer une grille de maçonnerie, mais le problème est que l'unité la plus longue se chevauche avec d'autres unités, et la maçonnerie.js pour une raison quelconque, ne remplit pas le zone par rapport à la hauteur du contenu du tout.

donc je pensais que je pouvais le faire manuellement en utilisant :nth-child sélecteurs.

Je veux le rendre plus comme ceci:

Voici ce que je suis arrivé à ce jour, http://lifeto.cafe24.com/xe/request

et je veux faire les couches se chevauchent pas les uns avec les autres et combler l'écart automatiquement.

Voici le code que je utilise:

css:

*, *:before, *:after { 
    box-sizing: border-box !important; 
} 

article { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-items: flex-start; 
} 

.board_list { 
    display: block; 
} 

.list_container { 
    height: auto; 
    margin: 0 20px 100px; 
    padding: 0; 
    width: 200px; 
    display: inline-block; 
} 

.list_profile_img_container { 
    /* border-bottom: 1px solid #ccc; */ 
    margin: 0; 
    padding: 0; 
} 

.list_profile_image { 
    border-radius: 100px; 
    width: 30px; 
    height: 30px; 
} 

.list_image_thumbnail { 
    width: 100%; 
    height:100%; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
} 

.list_one { 
    opacity: 0; 
    background: rgba(255,255,255,0.8); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
    border-radius: 3px; 
} 

html:

<article> 
    <!-- LIST --> 
    <div class="list_container"> 
     <div class="list_one"> 
     </div> 
    </div> 
</article> 

quelqu'un peut me aider?

P.S. voici le script js que j'utilise pour la fonctionnalité.

et notez que im en utilisant jscroll.js afin de créer l'effet de défilement infini et masonry.js de chargement im dans le fonction de rappel du plug-in.

/* infinite scroll */ 
jQuery(document).ready(function(){ 
jQuery('.board_content').jscroll({ 
    loadingHtml: '<div class="loading_div"><center><img  src="layouts/wb10/ajax-loader4.gif" alt="Loading" /></center></div>', 
    padding: 0, 
    contentSelector: '.board_list', 
    autoTriggerUntil: 30, 
    nextSelector:'.next_button', 
    callback: function() { 

     jQuery('.list_container').masonry({ 
    // options 
    itemSelector: '.list_container', 
    columnWidth: 50 
}); 

     jQuery('.list_one').waypoint(function() { 
     jQuery('.list_one').addClass('animated fadeIn'); 
     }, { 
     offset: '75%' 
    }); 
} 
}); }); 

Answer 1

J'ai vérifié les éléments et je trouve que chaque élément a height: 0px; et c'est le problème, ce que vous devez faire est de retarder l'appel de la bibliothèque de maçonnerie jusqu'à ce que chaque élément affiché sur l'écran puis exécutez la maçonnerie pour obtenir le bon effet