Zentrierende Elemente in Isotop

Question

Hallo an alle und ich hoffe es geht euch gut. Ich verwende Isotope und unten können Sie das JavaScript sehen, das ich geschrieben habe. Ich finde es unmöglich, li Elemente zu zentrieren, wenn sie die Isotope Elemente sind. Um zu sehen, was ich mit Zentrieren meine, sehen Sie bitte die Bilder unten. Ich habe es geschafft, das ganze Isotop auf den Bildschirm zu zentrieren, aber ich brauche auch die Elemente, die zentriert sind und nicht nur auf der linken Seite schweben.

Fangen wir mit meinem Script-Code starten:

<script> 
$(document).ready(function(e) { 
    $(".ullist li").addClass('element-item'); 
}); 

</script> 
<script> 
$(document).ready(function(e) { 
// external js: isotope.pkgd.js 

// init Isotope 
var $grid = $('.grid').isotope({ 
    itemSelector: '.element-item', 
    //layoutMode: 'fitRows', 
}); 
//$('.grid').isotope({ layoutMode : 'fitRows' }); 
// filter functions 
var filterFns = { 
    // show if number is greater than 50 
    numberGreaterThan50: function() { 
    var number = $(this).find('.number').text(); 
    return parseInt(number, 10) > 50; 
    }, 
    // show if name ends with -ium 
    ium: function() { 
    var name = $(this).find('.name').text(); 
    return name.match(/ium$/); 
    } 
}; 

// bind filter button click 
$('#filters').on('click', 'a', function() { 
    var filterValue = $(this).attr('data-filter'); 
    // use filterFn if matches value 
    filterValue = filterFns[ filterValue ] || filterValue; 
    $grid.isotope({ filter: filterValue }); 
}); 

// change is-checked class on buttons 
$('.secmenu ul a').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'a', function() { 
    $buttonGroup.find('.is-checked').removeClass('is-checked'); 
    $(this).addClass('is-checked'); 
    }); 
});}); 
</script> 
<script> 
$(function(){ 

    var $container = $('.grid'), 
     $body = $('body'), 
     colW = 20, 
     columns = null; 

    $container.isotope({ 
    // disable window resizing 
    resizable: true, 
    masonry: { 
     columnWidth: colW, 
     isFitWidth: true 
    } 
    }); 

    $(window).smartresize(function(){ 
    // check if columns has changed 
    var currentColumns = Math.floor(($body.width() -10)/colW); 
    if (currentColumns !== columns) { 
     // set new column count 
     columns = currentColumns; 
     // apply width to container manually, then trigger relayout 
     $container.width(columns * colW) 
     .isotope('reLayout'); 
    } 

    }).smartresize(); // trigger resize to set container width 

}); 
</script> 

Basic HTML-Struktur:

<ul class="ullist grid"> 
<li> ... </li> 
<li> ... </li> 
<li> ... </li> 
<li> ... </li> 
     </ul> 

Isotop funktioniert recht gut ohne Probleme (bisher). Dies ist mein aktuelles Layout:

Und dies ist das gewünschte Layout.

Ich habe sogar hier überprüft und versucht, David DeSandro Repository zu verwenden, aber ohne Erfolg. Also bitte, könnt ihr mir helfen, das Layout oben zu erreichen? Vielen Dank im Voraus.

jQuery isotope centering

Answer 1

Die beste Lösung hierfür wird mit der Flex-Box, wenn Sie nicht besorgt für alten Browser (unter IE8) zu unterstützen. Überprüfen Sie diesen Stift auf die Flexbox-Lösung codepen Link.

ul { 
    width: 600px; 
    list-style: none; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
} 
li { 
    width: calc((100%/3) - 60px); 
    height: 200px; 
    background-color: #d91c5c; 
    margin: 30px; 
}` 

Answer 2

Möglicherweise müssen Sie ein zusätzliches Markup hinzufügen und die Anzahl der Spalten erhöhen, in die Isotope Elemente einfügt.

<ul class="ullist grid"> 
    <li><span class="box">...</span></li> 
    <li><span class="box">...</span></li> 
    <li><span class="box">...</span></li> 
    <li><span class="box">...</span></li> 
</ul> 

Sie werden dann die Anzahl der Spalten auf etwas festgelegt, die sowohl von 2 teilbar ist und 3. Wenn Sie 6 erstellen, können Sie die ersten 6 li Elemente haben zwei Spalten erstrecken, und die letzten beiden Spannweite 3 :

Dann zu verwenden CSS positionieren Sie .box es innerhalb der li Artikel.

Dies wird schwierig, wenn Sie nicht wissen, wie viele ‚Streu‘ Elemente, die Sie am Ende haben werden - Sie benötigen Javascript verwenden diese, um herauszufinden, hängen Sie eine Klasse (wie .span-2, .span-3, .span-6