Các yếu tố trung tâm trong đồng vị

Question

Xin chào tất cả mọi người và tôi hy vọng bạn đang làm tốt. Tôi đang sử dụng đồng vị và dưới đây bạn có thể thấy JavaScript mà tôi đã viết. Tôi thấy không thể tập trung vào các phần tử li nếu chúng là các phần tử Đồng vị. Để xem ý tôi là gì, hãy xem các hình ảnh bên dưới. Tôi đã xoay sở để tập trung toàn bộ Isotope vào màn hình nhưng tôi cũng cần các phần tử được đặt ở giữa và không chỉ trôi về phía bên trái.

Hãy bắt đầu với mã kịch bản của tôi:

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

cơ bản cấu trúc HTML:

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

đồng vị hoạt động khá tốt với không có vấn đề (cho đến nay). Đây là bố cục hiện tại của tôi:

Và đây là bố cục mong muốn.

Tôi thậm chí đã kiểm tra tại đây và cố gắng sử dụng kho lưu trữ của David DeSandro nhưng không thành công. Vậy các bạn có thể giúp tôi ở đây để đạt được bố cục trên không? Cảm ơn tất cả các bạn trước.

jQuery isotope centering

Answer 1

Giải pháp tốt nhất cho điều này là sử dụng flex-ô này nếu bạn không quan tâm để hỗ trợ cho các trình duyệt cũ (sau đây IE8). Kiểm tra bút này cho giải pháp hộp flex 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

Bạn có thể cần phải thêm một số đánh dấu bổ sung và tăng số cột Isotope là các mục phù hợp vào.

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

Sau đó bạn sẽ thiết lập số cột để cái gì đó là chia hết cho cả 2 và 3. Nếu bạn tạo 6, bạn có thể có 6 li mục đầu tiên trải dài hai cột, và trận chung kết hai khoảng thời gian 3 :

Sau đó, sử dụng CSS để định vị .box es của bạn trong li mục.

này được khôn lanh, nếu bạn không biết có bao nhiêu 'đi lạc' mục bạn sẽ có lúc kết thúc - bạn có thể cần phải sử dụng javascript để con số này ra, thêm một lớp (như .span-2, .span-3, .span-6