Elementy centrujące w izotopie

Question

Witam wszystkich i mam nadzieję, że czujesz się dobrze. Używam Isotope i poniżej możesz zobaczyć JavaScript, który napisałem. Uważam, że nie można wyśrodkować elementów li, jeśli są one elementami izotopowymi. Aby zobaczyć, co mam na myśli przez centrowanie, zobacz zdjęcia poniżej. Udało mi się wyśrodkować cały Izotop na ekranie, ale potrzebuję również, aby elementy były wyśrodkowane, a nie tylko płynęły po lewej stronie.

Zacznijmy od mojego kodu skryptu:

<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> 

Podstawowa struktura HTML:

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

Izotop działa całkiem dobrze bez żadnych problemów (jak dotąd). To jest mój obecny układ:

I to jest pożądany układ.

Sprawdziłem nawet tutaj i próbowałem użyć repozytorium Davida DeSandro, ale bez powodzenia. Więc proszę, czy możecie mi pomóc, aby osiągnąć powyższy układ? Dziękuję wszystkim z góry.

jQuery isotope centering

Answer 1

Najlepszym rozwiązaniem na to jest za pomocą elastycznego-box, jeśli nie dotyczy wsparcia dla starych przeglądarek (poniżej IE8). Sprawdź to pióro dla rozwiązania flex-box 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

Być może trzeba będzie dodać kilka dodatkowych znaczników i zwiększyć liczbę kolumn, do których dopasowuje się Izotop.

<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> 

Będziesz wtedy ustawić liczbę kolumn do czegoś, co jest podzielna zarówno przez 2 i 3. W przypadku utworzenia 6, można mieć pierwsze 6 li pozycje obejmują dwie kolumny, a ostateczna dwa rozpiętości 3 :

Następnie użyj CSS, aby umieścić swoje .box es ciągu li przedmiotów.

To dostaje trudne, jeśli nie wiesz, jak wiele „bezpańskie” przedmioty musisz na koniec - może trzeba użyć javascript, aby dowiedzieć się tego, dołącz klasę (np .span-2, .span-3, .span-6