同位素中心元素

大家好，我希望你做得很好。我正在使用同位素，下面你可以看到我写的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

同位素中心元素

回答

相关问题