这绝对让我抓狂。 GitHub 上似乎没有提供黑白解决方案。 - 这很奇怪,因为这似乎是一个相当简单的概念。也许我只是不明白。
基本上,我正在尝试创建一个流畅和响应式投资组合 - 使用 Isotope来过滤项目。过滤工作正常,4 列完全流畅,当您调整窗口大小时,一切看起来都很棒。
但是,对于移动设备和平板电脑布局,我只需从 4 列 布局调整为 2 列 布局即可。
我尝试过这个:
$(window).load(function(){
var $container = $('#thumbs');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 },
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 }
});
});
// My attempt at using media queries to change 'columnWidth'
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$container.isotope( {
// update columnWidth to half of container width
masonry: { columnWidth: $container.width() / 2 }
});
}
});
});
没用:(
任何帮助将不胜感激。
最佳答案
这应该可以设置您的列数。然后你只需除以列
即可。
var columns;
// set column number
setColumns();
// rerun function when window is resized
$(window).on('resize', function() {
setColumns();
});
// the function to decide the number of columns
function setColumns() {
if($(window).width() <= 768) {
columns = 2;
} else {
columns = 4;
}
}
关于responsive-design - 同位素和媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12750989/