La maçonnerie laisse plusieurs lacunes

J'ai vérifié tous les articles concernant ce sujet, mais aucune des solutions n'a fonctionné pour moi.La maçonnerie laisse plusieurs lacunes

C'est ce que ma grille ressemble:

Voici le jsfiddle et est le code ici. HTML:

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Masonry --> 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
<link rel="stylesheet" href="css/style.css"> 


<!-- imagesLoaded --> 
<script 
src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"> 

// init Masonry 
var $grid = $('.grid').masonry({ 
    itemSelector: '.grid-item', 
    percentPosition: true, 
    columnWidth: '.grid-sizer' 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 
</script> 


<!-- Bootstrap --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 


<body> 

    <div class="container"> 

     <div class="grid"> 

      <div class="grid-item"> 
       <img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/MellowManAce.jpg" alt="Mellow Man Ace"> 
      </div> 

      <div class="grid-item"> 
       <img src="https://pbs.twimg.com/media/C2O6p6ZWgAA67jA.jpg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/CH-0141.jpg?enlarge=false&matte=true&matteColor=black&quality=0.85" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://cdn-images-1.medium.com/max/600/1*VfCrfkNhTVwAxftgfebcog.jpeg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> 
      </div> 

     </div>

CSS:

* { box-sizing: border-box; } 

/* force scrollbar */ 
html { overflow-y: scroll; } 
/* body { font-family: sans-serif; } */ 

/* ---- grid ---- */ 
.grid { 
    background: #DDD; 
} 

/* clear fix */ 
.grid:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

/* ---- .grid-item ---- */ 
.grid-sizer, 
.grid-item { 
    width: 33.333%; 
    float: left; 
} 
.grid-item img { 
    display: block; 
    max-width: 100%; 
}

Qu'est-ce que je fais essorer? Aidez-moi, s'il vous plaît. Merci beaucoup d'avance!

Source

2017-04-05 saitam

Votre premier problème est qu'une balise de script ne peut pas avoir à la fois un texte et src intérieur. http://stackoverflow.com/a/43240177/227299 a les autres détails de ce que vous manquez –

Vous devez mettre le javascript dans sa propre étiquette script (sans src) et vous avez besoin de mettre le jquery que vous utilisez avec imagesLoaded() dans $(document).ready() (ou $(function(){})) et pas besoin de spécifier columnWidth avec votre mise en page comme la largeur de colonne est dans votre CSS.

.grid { 
 
    background: #DDD; 
 
} 
 

 
.grid:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.grid-sizer, 
 
.grid-item { 
 
    width: 33.333%; 
 
    float: left; 
 
} 
 

 
.grid-item img { 
 
    display: block; 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script> 
 
<script> 
 
    $(function() { 
 
    var $grid = $('.grid').masonry({ 
 
     itemSelector: '.grid-item', 
 
     percentPosition: true, 
 
    }); 
 
    $grid.imagesLoaded().progress(function() { 
 
     $grid.masonry('layout'); 
 
    }); 
 
    }); 
 
</script> 
 

 
<div class="grid"> 
 
    <div class="grid-item"> 
 
    <img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/MellowManAce.jpg" alt="Mellow Man Ace"> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://pbs.twimg.com/media/C2O6p6ZWgAA67jA.jpg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/CH-0141.jpg?enlarge=false&matte=true&matteColor=black&quality=0.85" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://cdn-images-1.medium.com/max/600/1*VfCrfkNhTVwAxftgfebcog.jpeg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> 
 
    </div> 
 
</div>

Source

2017-04-05 19:38:20

Merci beaucoup! – saitam

@saitam vous êtes les bienvenus :) –

La bonne façon de le faire est d'utiliser une valeur réelle de la largeur, donc si vous voulez obtenir automatiquement (parce que les vôtres sont en pourcentage) juste obtenir la largeur grille-élément.

C'est une façon de le faire:

$('.grid').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: $(".grid-item").width() 
});

Exemple en cours d'exécution: https://jsfiddle.net/hqLj5t55/

Source

2017-04-05 19:39:05 TriForce

La maçonnerie laisse plusieurs lacunes

Répondre

Questions connexes