我一直在研究同位素容器,并且在使高度保持动态内容方面遇到了一些麻烦。
我已经为我的容器添加了选项reLayout
,可调整大小的真实但似乎没有让它正常工作。
我注意到我的容器正在注入它的高度样式但是没有想到从哪里开始,你会在我的视频中注意到我能够获得适合我内容的高度的唯一方法是设置一个高度同位素中的一个div(col_1
),容器似乎将高度注入其中,但不会与其他选项卡一起调整大小。我昨天用css整天摆弄着试图解决这个问题,但我很难过。
Heress a jing video of my issue: http://www.screencast.com/t/Zq1giEtdt
这是网站: http://daniloportal.com/NPC/howitworks.html
此外,这是我的同位素js的剪辑
//Isotope sorting
var $container = $('.projects');
$container.isotope({
filter: '.sort_category1',
resizesContainer: true,
resizable: true,
});
$('.projects').isotope('reLayout')
var $optionSets = $('#options .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;
});
});
感谢任何帮助,谢谢interwebs!
答案 0 :(得分:1)
经过多次混乱后我才明白了。我为Col_1设置了太高的高度样式我所做的就是消除那些样式,同位素现在动态设置所有高度参数! :d