Question

我已经被困在如何实施$(window).smartresize()功能以使我的div流畅的几个小时。

我使用了这个theme的javascript但是当我尝试自己实现它时，我的div不会调整大小。

我制作了一个更简单的页面来尝试测试它，就在这里。我通过这次多次运行Chrome Inspector，似乎宽度不会随着调整大小而改变。我有一种感觉，因为我曾经使用过：在CSS之前，但我不确定。

HTML

<div class="thumbs"> 
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div> 
 <div class="item" style="background-image: url('http://placehold.it/300x225');"></div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
</div>

CSS

.item {
 overflow:hidden;
 width:308px;
 float: left;
 position: relative;
 background-size: 100%;
 background-repeat: no-repeat;
}

.item:after {
 content: "";
 display: block;
 padding-top: 75%;
}

JS

var $gridContainer = $('.thumbs');
var colW;
var thumbWidth = 308;

function isotopeInit() {
 setColumns();  
 $gridContainer.isotope({       
  resizable: false,
  layoutMode: 'fitRows',
  masonry: {
   columnWidth: colW
  }
 });    
}

function setColumns()
{   
 var columns;
 console.log($gridContainer.width()/thumbWidth);

 columns = Math.ceil($gridContainer.width()/thumbWidth);    
 colW = Math.floor($gridContainer.width() / columns);
 $('.item').each(function(id){
  $(this).css('width',colW-gridGutter+'px');
 });
}

function gridResize() { 
 setColumns();

 $gridContainer.isotope({
  resizable: false,
  masonry: {
   columnWidth: colW
  }
 })     
}

$(window).load(function(){      
 isotopeInit(); 

});

$(window).smartresize(function(){
 gridResize();
});

Answer 1

鉴于您提供的链接指向Isotope v1文档，并且您使用的resizable选项仅为Isotope v1选项，我假设您正在使用Isotope v1。

我建议您更新为Isotope v2并使用百分比大小调整您的同位素元素，并使用element sizing调整容器大小和column widths。这种技术在大卫·德桑德罗（David DeSandro）的this jsfiddle中展示，是同位素的创造。

Answer 2

smartresize（）函数仅适用于Isotope v1，而我正在运行v2。最后，我通过使用开源jQuery plugin解决了这个问题，它提供了与smartresize（）相同的功能，并且与Isotope v2兼容。

使用Isotope的smartresize（）使div变得流畅

2 个答案: