1
Wie Sie in dem Code-Stift unten sehen können; Es gibt einen Platz direkt neben dem ersten Bild, das nicht gefüllt wird, wenn andere Elemente hinzugefügt werden können.Mansory/Isotope funktioniert nicht mit Elementen unterschiedlicher Breite
Ich habe keine Lösung gefunden, bei der die Elementbreite in Prozent definiert wurde.
Codepen: https://codepen.io/anon/pen/qXEMaz
Html:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<div class ="container">
<div class=" isotope row gutter">
<div class="grid-sizer col-2 mosaic-item">
<img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
</div>
<div class="col-1 mosaic-item ">
<img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
</div>
<div class="col-2 mosaic-item ">
<img class="img-responsive" src="http://via.placeholder.com/350x150"></img>
</div>
<div class="col-2 mosaic-item ">
<img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
</div>
<div class="col-2 mosaic-item ">
<img class="img-responsive" src="http://via.placeholder.com/350x150"></img>
</div>
<div class="col-2 mosaic-item ">
<img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
</div>
</div>
</div>
CSS:
.col-1 ,
.col-1 {
width: 100%;
}
.col-2 ,
.col-2 {
width: 49.99%;
}
@media only screen and (max-width: 992px) {
.col-2 ,
.col-2 {
width: 50%;
}
}
@media only screen and (max-width: 767px) {
.col-2 ,
.col-2 {
width: 100%;
}
}
.col-1 ,
.col-2{
float: left;
}
.gutter>div{
padding: 10px;
}
.gutter img{
width: 100%;
}
Javascript/jQuery:
$(document).ready(function(){
isotope();
});
function isotope(){
var $portfolio = $('.isotope');
$portfolio.imagesLoaded(function() {
$portfolio.isotope({
isOriginLeft: true,
stagger: 30,
masonry: {
percentPosition: true
}
});
$portfolio.isotope();
});
}
Vielen Dank.
dieser Code in CSS: 'Gosse> div' wird Raum aus den Blöcken verwendet. Kannst du bitte ein Bild von dem, was du willst, posten? – Syfer
Die Rinne> div wird nur verwendet, um sie etwas zu beabstanden, aber das Problem ist der große leere Raum, der gefüllt werden kann. Hier ist das Bild: http://imgur.com/a/Cohn9 Ich hatte gehofft, dass der Platz in rot gefüllt werden würde, weil dort Bilder passen, die dort passen. Ich möchte nicht die Reihenfolge der Elemente wechseln. Grundsätzlich möchte ich keinen Leerraum, wenn dort Bilder sein können. – gemas