J'utilise le Packery layout mode in Isotope JS. J'utilisais la Maçonnerie, mais j'ai trouvé que j'obtenais des résultats plus désirables en utilisant ce mode à la place, mais je suis totalement ouvert à d'autres options. Je l'utilise également intégré à la grille responsive Bootstrap comme décrit here. Tout fonctionne très bien à l'exception d'une chose.Isotope JS Packery Tile Gaps
J'ai une tuile simple largeur, puis une tuile double largeur, suivie de plusieurs tuiles simple largeur. Tout semble très bien dans les configurations Bootstrap 4 et 3 colonnes. Dès que je l'effondre à la configuration de 2 colonnes, j'ai seulement 1 tuile single-large en haut dans la première position. Le double-large est en dessous, et toutes les tuiles larges simples apparaissent côte-à-côte (2 par rangée) tout le long, comme vous le souhaitez. Il y a même un seul carreau qui reste en bas, et si on le réorganise, chaque carreau simple sera jumelé avec un carreau du même type.
Voici quelques grilles rapides des 3 configurations de colonnes différentes pour une visualisation:
4-Columns: 3-Columns: 2-Columns:
+--+--+--+--+ +--+--+--+ +--+--+
|88|88888|88| |88|88888| |88| <---this empty tile right here...
|88|88|88|88| |88|88|88| |88888|
|88|88| | | |88|88|88| |88|88|
+--+--+--+--+ |88| | | |88|88|
+--+--+--+ |88|88|
|88<------...should be filled up by this
+--+--+ tile (or one before it)
Voici une repro:
$('.grid').isotope({
\t packery: {
\t \t columnWidth: '.grid-sizer'
\t },
\t itemSelector: '.grid-item',
\t percentPosition: true,
});.one {
background-color: red;
}
.two {
background-color: orange;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: blue;
}
.six {
background-color: purple;
}
.seven {
background-color: red;
}
.eight {
background-color: orange;
}
.nine {
background-color: yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<div class="container-fluid">
\t <div class="row">
\t \t <div class="grid">
\t \t \t <div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
\t \t \t \t <div class="grid-item-content">ONE</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
\t \t \t \t <div class="grid-item-content">TWO</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
\t \t \t \t <div class="grid-item-content">THREE</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
\t \t \t \t <div class="grid-item-content">FOUR</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
\t \t \t \t <div class="grid-item-content">FIVE</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
\t \t \t \t <div class="grid-item-content">SIX</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
\t \t \t \t <div class="grid-item-content">SEVEN</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
\t \t \t \t <div class="grid-item-content">EIGHT</div>
\t \t \t </div>
\t \t \t <div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
\t \t \t \t <div class="grid-item-content">NINE</div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>Toutes les idées? Je vous remercie!
Vous pouvez poster votre code d'isotope, à droite. Comment est ce propriétaire? Quoi qu'il en soit, il y a beaucoup d'idées mais difficile sans au moins un code de base. – Macsupport
@Macsupport Code posté :) –
2 choses que je vois. Vous chargez 2 versions de jQuery (ancienne version 1.12.4 et nouvelle version 3.1.1). Mauvaise idée. Vous ne chargez pas non plus la disposition de l'emballage pour l'isotope. Ce mode de présentation n'est pas inclus dans isotope.pkgd.js et doit être installé séparément, [Téléchargez-le ici] (https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min. js) – Macsupport