自动调整同位素

Question

我一直在研究这个主题 http://clapat.ro/berger/ 以及它的工作方式是在它的中间设置网格。我一直在窥探 javascript 文件，看起来它正在根据宽度自动调整 '.item' class 的大小。

我正在尝试复制这种调整大小，但以我对 jQuery 的新手理解，我无法轻易破译他的代码或理解他自动调整网格元素大小的方式。

我为自己做了一点 JS Fiddle http://jsfiddle.net/7L9aey1c/

function MasonryPortfolio() {   

    if( $('#portfolio-wrap').length > 0 ){  

        var $container = $('#portfolio');

        $container.isotope({
          itemSelector: '.item',
          gutter:0,
          transitionDuration: "0.5s"
        });

        $(window).on( 'resize', function () {

            var winWidth = window.innerWidth;
            columnNumb = 1;         
            var attr_col = $('#portfolio').attr('data-col');

             if (winWidth >= 1466) {

                $('#portfolio-wrap').css( {width : 1360  + 'px'});
                $('#portfolio-wrap.no-gutter').css( {width : 1280  + 'px'});            
                var portfolioWidth = $('#portfolio-wrap').width();

                if (typeof attr_col !== typeof undefined && attr_col !== false) {
                    columnNumb = $('#portfolio').attr('data-col');
                } else columnNumb = 3;

                postWidth = Math.floor(portfolioWidth / columnNumb)         
                $container.find('.item').each(function () { 
                    $('.item').css( { 
                        width : postWidth - 80 + 'px',
                        height : postWidth * 0.75 - 80 + 'px',
                        margin : 40 + 'px' 
                    });
                    $('.no-gutter .item').css( {
                        width : postWidth  + 'px',
                        height : postWidth * 0.75  + 'px',
                        margin : 0 + 'px' 
                    });
                    $('.item.wide').css( { 
                        width : postWidth * 2 - 80 + 'px'  
                    });
                    $('.no-gutter .item.wide').css( { 
                        width : postWidth * 2 + 'px'  
                    });
                    $('.item.tall').css( {
                        height : postWidth * 1.5 - 80 + 'px'  
                    });
                    $('.no-gutter .item.tall').css( {
                        height : postWidth * 1.5  + 'px'  
                    });
                    $('.item.wide-tall').css( {
                        width : postWidth * 2 - 80 + 'px',
                        height : postWidth * 1.5 - 80 + 'px'  
                    });
                    $('.no-gutter .item.wide-tall').css( {
                        width : postWidth * 2 + 'px',
                        height : postWidth * 1.5  + 'px'  
                    });
                });


            } else if (winWidth > 1024) {

                $('#portfolio-wrap').css( {width : 1000  + 'px'});
                $('#portfolio-wrap.no-gutter').css( {width : 940  + 'px'});         
                var portfolioWidth = $('#portfolio-wrap').width();

                if (typeof attr_col !== typeof undefined && attr_col !== false) {
                    columnNumb = $('#portfolio').attr('data-col');
                } else columnNumb = 3;

                postWidth = Math.floor(portfolioWidth / columnNumb)         
                $container.find('.item').each(function () { 
                    $('.item').css( { 
                        width : postWidth - 60 + 'px',
                        height : postWidth * 0.75 - 60 + 'px',
                        margin : 30 + 'px' 
                    });
                    $('.no-gutter .item').css( {
                        width : postWidth  + 'px',
                        height : postWidth * 0.75  + 'px',
                        margin : 0 + 'px' 
                    });
                    $('.item.wide').css( { 
                        width : postWidth * 2 - 60 + 'px'  
                    });
                    $('.no-gutter .item.wide').css( { 
                        width : postWidth * 2 + 'px'  
                    });
                    $('.item.tall').css( {
                        height : postWidth * 1.5 - 60 + 'px'  
                    });
                    $('.no-gutter .item.tall').css( {
                        height : postWidth * 1.5  + 'px'  
                    });
                    $('.item.wide-tall').css( {
                        width : postWidth * 2 - 60 + 'px',
                        height : postWidth * 1.5 - 60 + 'px'  
                    });
                    $('.no-gutter .item.wide-tall').css( {
                        width : postWidth * 2 + 'px',
                        height : postWidth * 1.5  + 'px'  
                    });
                });


            } else if (winWidth > 767) {

                $('#portfolio-wrap').css( {width : 640  + 'px'});
                $('#portfolio-wrap.no-gutter').css( {width : 600  + 'px'});

                var portfolioWidth = $('#portfolio-wrap').width(),

                columnNumb = 2;
                postWidth = Math.floor(portfolioWidth / columnNumb)         
                $container.find('.item').each(function () { 
                    $('.item').css( { 
                        width : postWidth - 40 + 'px',
                        height : postWidth * 0.75 - 40 + 'px',
                        margin : 20 + 'px' 
                    });
                    $('.no-gutter .item').css( {
                        width : postWidth  + 'px',
                        height : postWidth * 0.75  + 'px',
                        margin : 0 + 'px' 
                    });
                    $('.item.wide').css( { 
                        width : postWidth * 2 - 40 + 'px'  
                    });
                    $('.no-gutter .item.wide').css( { 
                        width : postWidth * 2 + 'px'  
                    });
                    $('.item.tall').css( {
                        height : postWidth * 1.5 - 40 + 'px'  
                    });
                    $('.no-gutter .item.tall').css( {
                        height : postWidth * 1.5  + 'px'  
                    });
                    $('.item.wide-tall').css( {
                        width : postWidth * 2 - 40 + 'px',
                        height : postWidth * 1.5 - 40 + 'px'  
                    });
                    $('.no-gutter .item.wide-tall').css( {
                        width : postWidth * 2 + 'px',
                        height : postWidth * 1.5  + 'px'  
                    });
                });


            }   else if (winWidth > 479) {

                $('#portfolio-wrap').css( {width : 440  + 'px'});
                $('#portfolio-wrap.no-gutter').css( {width : 400  + 'px'});

                var portfolioWidth = $('#portfolio-wrap').width(),

                columnNumb = 1;
                postWidth = Math.floor(portfolioWidth / columnNumb)         
                $container.find('.item').each(function () { 
                    $('.item').css( { 
                        width : postWidth - 40 + 'px',
                        height : postWidth * 0.75 - 40 + 'px',
                        margin : 20 + 'px' 
                    });
                    $('.no-gutter .item').css( {
                        width : postWidth  + 'px',
                        height : postWidth * 0.75  + 'px',
                        margin : 0 + 'px' 
                    });
                    $('.item.wide').css( { 
                        width : postWidth - 40 + 'px'  
                    });
                    $('.no-gutter .item.wide').css( { 
                        width : postWidth + 'px'  
                    });
                    $('.item.tall').css( {
                        height : postWidth * 1.5 - 40 + 'px'  
                    });
                    $('.no-gutter .item.tall').css( {
                        height : postWidth * 1.5  + 'px'  
                    });
                    $('.item.wide-tall').css( {
                        width : postWidth - 40 + 'px',
                        height : postWidth * 0.75 - 40 + 'px'  
                    });
                    $('.no-gutter .item.wide-tall').css( {
                        width : postWidth  + 'px',
                        height : postWidth * 0.75  + 'px'  
                    });
                });


            }

            else if (winWidth <= 479) {

                $('#portfolio-wrap').css( {width : 280  + 'px'});
                $('#portfolio-wrap.no-gutter').css( {width : 240  + 'px'});

                var portfolioWidth = $('#portfolio-wrap').width(),

                columnNumb = 1;
                postWidth = Math.floor(portfolioWidth / columnNumb)         
                $container.find('.item').each(function () { 
                    $('.item').css( { 
                        width : postWidth - 40 + 'px',
                        height : postWidth * 0.75 - 40 + 'px',
                        margin : 20 + 'px' 
                    });
                    $('.no-gutter .item').css( {
                        width : postWidth  + 'px',
                        height : postWidth * 0.75  + 'px',
                        margin : 0 + 'px' 
                    });
                    $('.item.wide').css( { 
                        width : postWidth - 40 + 'px'  
                    });
                    $('.no-gutter .item.wide').css( { 
                        width : postWidth + 'px'  
                    });
                    $('.item.tall').css( {
                        height : postWidth * 1.5 - 40 + 'px'  
                    });
                    $('.no-gutter .item.tall').css( {
                        height : postWidth * 1.5  + 'px'  
                    });
                    $('.item.wide-tall').css( {
                        width : postWidth - 40 + 'px',
                        height : postWidth * 0.75 - 40 + 'px'  
                    });
                    $('.no-gutter .item.wide-tall').css( {
                        width : postWidth + 'px',
                        height : postWidth * 0.75  + 'px'  
                    });
                });


            }       
            return columnNumb;


        }).resize();

完整源代码（Portfolio Masonry 部分）http://clapat.ro/berger/js/scripts.js

我正在寻找一些关于如何复制他的网格或如何自动调整元素大小而不是静态地为每个“.item”元素提供 class 的 'width2 height2' 的建议。

Answer 1

先用bootstrap，再用use isotope v2 and its element sizing new feauture.

在 jQuery 你会运行:

var $container = $('#container').isotope({
 itemSelector: '.item',
 masonry: {
   columnWidth: '.grid-sizer',
  isFitWidth: true
 }
});

你的 html 看起来像这样：

<div class=container">
  <div class="row">
    <div id="container">
      <div class="grid-sizer col-sm-2 col-md-3 col-lg-3"></div>
      <div class="item col-sm-4 col-md-3 col-lg-2">
      <div class="item col-sm-2 col-md-6 col-lg-4">
      <div class="item col-sm-8 col-md-9 col-lg-8">
    </div>
  </div> 
</div>

CSS

#container {
  margin: 0 auto;
}

这不仅会使您的布局居中，而且还会响应。 grid-sizer 将是你的 columnWidth 并且它会根据 your bootstrap classes 改变它的宽度使整个事物如你所期望的那样响应，最重要的是你将看到的元素数量每行将基于您的 bootstrap class 设置。

注意：如果您想要不同的尺寸，您需要指定一个网格，该网格使用每个 .items 宽度的一半。 See this answer for a more complete code.

希望对你有所帮助

自动调整同位素

Auto Sizing Isotope

javascript

jquery

jquery-isotope

jquery-masonry