自动定径同位素 我一直在关注这个主题和它的方式，在它的中间是网格。我一直在窥探javascript文件，它似乎在根据宽度自动调整“.item”类的大小

我试图复制这种大小调整，但由于我对jQuery的新手理解，我无法轻松解读他的代码，也无法理解他自动调整网格元素大小的方式

我为自己做了一把小提琴

函数MasonryPortfolio（）{
如果（$（“#公文包包装”）.length>0{
var$container=$（“#投资组合”）；
$container.com({
itemSelector:“.item”，
排水沟：0，
过渡持续时间：“0.5s”
});
$（窗口）.on（'resize'，函数（）{
var winWidth=window.innerWidth；
columnnub=1；
var attr#u col=$（“#投资组合”）.attr（'data-col'）；
如果（winWidth>=1466）{
$（'#公文包包装'）.css（{width:1360+'px'}）；
$（'#公文包包装.无边沟'）.css（{width:1280+'px'}）；
var portfolioWidth=$（“#投资组合包装”）.width（）；
if（属性列的类型！==未定义的类型和属性列的类型！==false）{
columnnum=$（“#投资组合”）.attr（'data-col'）；
}else-columnnum=3；
postWidth=数学楼层（portfolioWidth/ColumnNum）
$container.find（'.item'）。每个（函数（）{
$（'.item'）.css（{
宽度：postWidth-80+‘px’，
高度：postWidth*0.75-80+‘px’，
利润率：40+‘像素’
});
$（'.no.gotter.item'）.css（{
宽度：postWidth+‘px’，
高度：postWidth*0.75+‘px’，
边距：0+‘px’
});
$（'.item.wide'）.css（{
宽度：postWidth*2-80+像素
});
$（'.no.item.wide'）.css（{
宽度：postWidth*2+‘px’
});
$（'.item.tall'）.css（{
高度：postWidth*1.5-80+‘px’
});
$（'.no gotter.item.tall'）.css（{
高度：postWidth*1.5+‘px’
});
$（'.item.wide-toll'）.css（{
宽度：postWidth*2-80+‘px’，
高度：postWidth*1.5-80+‘px’
});
$（'.no gotter.item.wide-toll'）.css（{
宽度：postWidth*2+“px”，
高度：postWidth*1.5+‘px’
});
});
}否则如果（winWidth>1024）{
$（'#公文包包装'）.css（{width:1000+'px'}）；
$（'#公文包包装.无边沟'）.css（{width:940+'px'}）；
var portfolioWidth=$（“#投资组合包装”）.width（）；
if（属性列的类型！==未定义的类型和属性列的类型！==false）{
columnnum=$（“#投资组合”）.attr（'data-col'）；
}else-columnnum=3；
postWidth=数学楼层（portfolioWidth/ColumnNum）
$container.find（'.item'）。每个（函数（）{
$（'.item'）.css（{
宽度：postWidth-60+‘px’，
高度：postWidth*0.75-60+‘px’，
利润率：30+‘像素’
});
$（'.no.gotter.item'）.css（{
宽度：postWidth+‘px’，
高度：postWidth*0.75+‘px’，
边距：0+‘px’
});
$（'.item.wide'）.css（{
宽度：postWidth*2-60+像素
});
$（'.no.item.wide'）.css（{
宽度：postWidth*2+‘px’
});
$（'.item.tall'）.css（{
高度：postWidth*1.5-60+‘px’
});
$（'.no gotter.item.tall'）.css（{
高度：postWidth*1.5+‘px’
});
$（'.item.wide-toll'）.css（{
宽度：postWidth*2-60+像素，
高度：postWidth*1.5-60+‘px’
});
$（'.no gotter.item.wide-toll'）.css（{
宽度：postWidth*2+“px”，
高度：postWidth*1.5+‘px’
});
});
}否则如果（winWidth>767）{
$（'#公文包包装'）.css（{width:640+'px'}）；
$（'#公文包包装.无边沟'）.css（{width:600+'px'}）；
var portfolioWidth=$（“#投资组合包装”）.width（），
柱数=2；
postWidth=数学楼层（portfolioWidth/ColumnNum）
$container.find（'.item'）。每个（函数（）{
$（'.item'）.css（{
宽度：postWidth-40+‘px’，
高度：postWidth*0.75-40+像素，
利润率：20+‘像素’
});
$（'.no.gotter.item'）.css（{
宽度：postWidth+‘px’，
高度：postWidth*0.75+‘px’，
边距：0+‘px’
});
$（'.item.wide'）.css（{
宽度：postWidth*2-40+像素
});
$（'.no.item.wide'）.css（{
宽度：postWidth*2+‘px’
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();

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

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

#container {
  margin: 0 auto;
}