Mauerwerk hinterlässt mehrere Lücken

Ich habe alle Beiträge zu diesem Thema überprüft, aber keine der Lösungen funktionierte für mich. DieseMauerwerk hinterlässt mehrere Lücken

ist, was mein Gitter aussieht:

Hier die jsfiddle ist und hier ist der Code. 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%; 
}

Was soll ich wring tun? Bitte hilf mir. Vielen Dank im Voraus!

Quelle

2017-04-05 saitam

Ihr erstes Problem ist, dass ein Script-Tag nicht sowohl einen src und inneren Text hat. http://Stackoverflow.com/a/43240177/227299 hat die anderen Details von dem, was Sie vermissen –

Sie müssen in einem eigenen script Tag das Javascript setzen (ohne src) und Sie müssen die jquery setzen Sie mit imagesLoaded() in $(document).ready() (oder $(function(){})) und keine Notwendigkeit zu geben columnWidth mit Ihrem Layout als die verwenden Spaltenbreite ist in Ihrem 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>

Quelle

2017-04-05 19:38:20

Vielen Dank! – saitam

@saitam du bist willkommen :) –

Der richtige Weg, um einen echten Breitenwert zu tun ist, verwendet wird, so dass, wenn Sie es automatisch erhalten mögen (weil IhrFormal in Prozent sind) bekommt nur die Raster-Element Breite.

Dies ist eine Art und Weise zu tun:

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

Beispiel läuft: https://jsfiddle.net/hqLj5t55/

Quelle

2017-04-05 19:39:05 TriForce

Mauerwerk hinterlässt mehrere Lücken

Antwort

Verwandte Themen