Hauteur de la question en Chrome avec jquery Isotope mise en page responsive avec Bootstrap 3

Je suis en utilisant l'Isotope plugin pour filtrer ma liste de produits. J'ai aussi utiliser Bootstrap 3 pour la mise en page, la page doit être réactives, afin que les largeurs de colonne sont basés sur un pourcentage. Je veux égale hauteur des images miniatures et de largeur égale, une simple grille. J'ai d'abord essayé avec "fitRows" mode de mise, mais j'ai eu un problème avec des faux numéros de colonnes (dans tous les navigateurs) et a trouvé la supplémentaires de mise en page de comportement "Sloppy Maçonnerie" posté par Cubica à https://github.com/cubica/isotope-sloppy-masonry - ce résolu le problème avec les largeurs de colonne lors d'une grille souple. Pour résoudre des hauteurs égales, j'ai fait un simple JS pour définir toutes les hauteurs pour s'adapter au plus haut point.

Mon problème: Dans google Chrome, il y a un problème que la vignette de la hauteur se trompe, beaucoup trop petit, et le contenu est coupée. (notez que le problème est là unregarded de mon resizeboxes() fonction.)

L' (onu)drôle, c'est qu'il n'arrive pas à chaque fois. Aussi, quand j'ai redimensionner le Chrome de la fenêtre, la route devient de droit...

J'ai lu que des Isotopes v2 (maintenant bêta) serait en mesure de gérer des mises en forme réactives mieux, mais je ne pouvais pas le faire fonctionner mieux. Maintenant, j'ai essayé différents trucs, mais je ne peux pas obtenir ce que je veux. Le code actuel fonctionne dans tous les principaux navigateurs, sauf Chrome... Aide appréciée!

Voici mon actuel (légèrement simplifié) code:

<div class="row" id="listing">
    <?php foreach ($products as $p): ?>
    <div class="col-md-3 list">
        <img src="<?=$p->image_file?>" class="img-responsive" />
        <h4><?=$p->title?></h4>
    </div>
    <?php endforeach; ?>   
 </div>

Fonction JS pour faire de l'égalité des hauteurs:

function resizeBoxes()
{
    var h = 0;
    $('div.view').each(function() 
    {
        var b = $(this);
        if (h < b.height()) h = b.height();
    });     
    $('div.view').height(h);
}

Et init isotope fonction:

var $container = $('#listing');
function initIsotope()
{
     $container.isotope({
          layoutMode: 'sloppyMasonry',
     });
}

$(window).resize(function() {
    resizeBoxes();  
    initIsotope();
});
$(document).ready(function() {
    resizeBoxes();
    initIsotope();
});

OriginalL'auteur jtheman | 2014-01-16

  1. 13

    Même si j'ai lu ce post avant, la réponse peut être trouvée ici: Ne pouvez pas obtenir des Isotopes de travail avec Bootstrap 3 .miniature

    Problème est que, lorsque les images ne sont pas chargées, et puisque les images responsives ne peut pas avoir la largeur/hauteur de l'ensemble de valeurs, soit l'Isotope ni mon égal fonction de hauteur pourrait régler correctement la hauteur de l'image. Donc, la solution est simple, il suffit de réglage de l'Isotope à init de la charge à la place:

    $(window).load(function() {
    resizeBoxes();
    initIsotope();
    $('#listing').animate({opacity: 1.0}, 200);
});

    J'ai ajouté un fadein pour éviter le scintillement avant de charger avaient fini.

    OriginalL'auteur jtheman

  2. 0

    la imagesLoaded plugin devrait totalement le travail (même si il a été supprimé à partir des Isotopes v2), personnellement, je l'ai résolu comme ceci:

    var myGrid = $('.grid');

myGrid.imagesLoaded(function(){
    myGrid.isotope();
});

    Mais j'ai aussi aimé la façon dont ce plugin résolu le problème en interne: http://goo.gl/sQ6yXj et c'est à l'aide d'Isotopes v2 qui est très impressionnant

    OriginalL'auteur silk