我一直在关注这个主题http://clapat.ro/berger/以及它在中间的网格方式。我一直在窥探javascript文件，它看起来像是根据宽度自动调整'.item'类的大小。
我正在尝试复制这种大小调整，但是由于我对jQuery的新手理解，我无法轻易破译他的代码或理解他自动调整网格元素大小的方式。
我为自己制作了一个小小的JS小提琴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 Section）http://clapat.ro/berger/js/scripts.js
我正在寻找一些关于如何复制网格或如何自动调整元素大小的建议，而不是静态地给每个'.item'元素一个'width2 height2'。
答案 0 :(得分：0)
首先使用bootstrap，其次是use isotope v2及其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 {{1}}，它会根据your bootstrap classes更改其宽度，使整个事情按照您的预期进行响应，除此之外，您将使用的元素数量看每一行都将基于你的bootstrap类设置。
注意：如果您想要不同的尺寸，则需要指定一个网格，该网格使用每个.items宽度的一半。 See this answer for a more complete code.
我希望有帮助