0
我正在使用同位素全寬網格系統。我已經得到它的工作，但我在響應元素有一些問題。我想對系統採取4,3,2,1的方法，例如。 4件用於桌面，3件用於平板電腦，2件用於暴民景觀，1件用於暴民肖像。同位素 - 響應4,3,2,1佈局
無論我嘗試什麼，在調整大小時都會出現奇怪的佈局。我能得到的最接近它的代碼是下面的代碼，但是當調整窗口大小時，有時元素會掉到一條新線上，並導致網格之間的巨大差距。我希望網格無縫。
這是我的代碼：
<script>
var $container = $('#isotope')
$container.imagesLoaded(function(){
$('#isotope').isotope({
// options
animationEngine : 'best-available',
layoutmode: 'masonry',
filter: '.all-header, .project, .clients, .news, .blog'
});
});
// initialize Isotope
$container.isotope({
// options...
resizable: true, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width()/25 }
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width()/25 }
});
});
var $optionSets = $('#filter_bar .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
</script>