동위 원소의 중심 요소

Question

여러분 안녕하세요. 나는 Isotope를 사용하고 있으며 아래에서 필자가 작성한 JavaScript를 볼 수있다. 동위 원소 요소 인 경우 li 요소를 중심으로 배치하는 것이 불가능하다는 것을 발견했습니다. 센터링으로 무엇을 의미하는지 보려면 아래 이미지를 참조하십시오. 나는 스크린에 전체 동위 원소를 집중시킬 수 있었지만, 왼쪽으로 부유하는 것이 아니라 중심에 배치되도록 요소가 필요하다.

의 내 스크립트 코드부터 시작하자 :

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

기본 HTML 구조 :

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

동위 원소는 문제없이 (지금까지) 꽤 잘 작동합니다. 이것이 현재 레이아웃입니다.

그리고 이것이 원하는 레이아웃입니다.

나는 여기서도 확인하고 David DeSandro의 저장소를 사용하려고했지만 성공하지는 못했습니다. 그래서 위의 레이아웃을 달성하기 위해 여기에서 나를 도울 수 있습니까? 미리 감사드립니다. 당신이 걱정하지 (IE8 이하) 오래된 브라우저를 지원하는 경우

jQuery isotope centering

Answer 1

이를위한 가장 좋은 방법은 플렉스 박스를 사용하고 있습니다. 플렉스 박스 솔루션 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

추가 마크 업을 추가하고 Isotope가 맞는 항목 수를 늘려야 할 수도 있습니다.

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

당신은 다음 6을 작성하는 경우, 첫 번째 6 개 li 항목은 두 개의 열, 그리고 마지막 두 기간 (3)에 걸쳐있을 수 모두 2와 3로 나누어 뭔가를 열 수를 설정합니다 :

그런 다음, CSS를 사용이 li 항목 내에서 .box ES 위치합니다.

당신은 당신이 마지막에해야합니다 얼마나 많은 '부유'항목 모르는 경우이 까다로운 얻을 수 - 당신은 추가, 이것을 알아 내기 위해 자바 스크립트를 사용하는 클래스를해야 할 수도 있습니다 (예 : .span-2, .span-3, .span-6