同位素中心元素

大家好，我希望你做得很好。我正在使用同位素，下面你可以看到我寫的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的存儲庫，但沒有成功。所以，請大家可以幫助我實現上面的佈局嗎？謝謝大家提前。

jQuery isotope centering

來源

2016-07-29 justme

這樣做的最好的解決辦法是使用柔性框，如果你不關心，爲舊的瀏覽器支持（以下IE8）。檢查此筆的柔性盒解決方案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; 
}`

來源

2016-08-03 05:24:38

是的，但這種方式我不能使用同位素給我的動畫效果和過濾我想在同位素代碼中實現這種佈局 – justme

只是爲了提供信息：flex不支持IE9，而且你不需要寫flex-direction：row是因爲它是默認值。另一種：最常用的方法是給flex-items一個寬度而不是flex-basic。 –

您可能需要添加一些額外的標記並增加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>

然後你會設置一些列的數，它是既2和3整除如果創建6，你可以有第6個li項目跨越兩列，最後兩個跨度3 ：

然後，使用CSS的li項目中定位您的.box ES。

這得到棘手，如果你不知道你有多少「流浪」的項目必須在年底 - 您可能需要使用JavaScript來算出這個，追加一個類（如.span-2, .span-3, .span-6

來源

2016-08-06 20:14:30

同位素中心元素

回答

相關問題