自动定量同位素
Auto Sizing Isotope
本文关键字：同位素 更新时间：2023-09-26
我一直在研究这个主题 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();
完整的源代码（投资组合砌体部分）http://clapat.ro/berger/js/scripts.js
我正在寻找一些关于如何复制他的网格或如何自动调整元素大小的建议，而不是静态地为每个".item"元素提供"width2 height2"类。
首先使用引导程序，其次使用同位素v2及其元素大小调整新功能。
在jQuery中，你会运行：
var $container = $('#container').isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});
你的 html woud 看起来像这样：
<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，它会根据你的引导类改变它的宽度，使整个事情像你期望的那样响应，最重要的是，你将在每一行看到的元素数量将基于你的引导类设置。
注意：如果需要不同的大小，则需要指定一个网格，该网格使用每个.items宽度的一半。有关更完整的代码，请参阅此答案。
我希望这有所帮助
相关文章：
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 同位素更新到V2，如何切换大小和布局
- jQuery同位素和推特引导导航导航药丸
- 有没有一种方法可以创建到同位素过滤器的直接链接
- 按类别排序;元素有多个类别(同位素.js）
- 使用同位素插件，我可以按字符串名称过滤并使图像重叠吗?
- 使用同位素v2与RequireJS
- 具有多重过滤器的同位素
- jQuery同位素插件添加过滤器
- 同位素分页布局?或者至少是增量加载
- 转换UL->li inot为同位素过滤菜单选择的列表
- 在动态添加的图像上实现Jquery同位素
- 添加'错误'消息发送到同位素.JS搜索筛选器
- 同位素网格布局使用空白空间
- jQuery同位素if/else使用indexOf时出现问题
- 同位素jquery与演示中的布局相同
- 在同位素.js中加入多个复选框过滤器
- JavaScript同位素:无法读取属性'每个'的未定义
- 同位素JS绝对定位
- 有人创建了同位素下拉菜单吗
