Я использую Изотопный фильтр и поиск, а высота элементов слегка увеличивается с каждым нажатием кнопки или поиском. Мне нужно, чтобы они остались одного размера.
Чтобы понять, что я имею в виду, сайт имеет вид https://www.exploreloudoncounty.com/explore/
Я попытался включить свойство max-height в CSS и я не знаю, что еще попробовать.
HTML:
<p><input type="text" class="quicksearch" placeholder="Search" /></p>
<div class="filters">
<div class="ui-group">
<div class="button-group js-radio-button-group" data-filter-group="size">
<button class="btn is-checked" data-filter="">Show All</button>
<button class="btn" data-filter=".adv">Advertising</button>
<button class="btn" data-filter=".const">Construction</button>
<button class="btn" data-filter=".retail">Retail</button>
<button class="btn" data-filter=".real">Realty</button>
<button class="btn" data-filter=".pol">Political</button>
</div>
</div>
</div>
<div class="grid">
<div class="element-item lc const"><a href="/explore/lcrr">
<img src="/explore/lcrr/favicon.png">
<hr>
<h3>American Log Cabin Restoration<span class="hidden">lc const house construction</span></h3>
<p id="hourslog"></p></a>
<p><a href="tel:+18655672190">(865) 567-2190</a></p>
<a href="/explore/lcrr"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
</div>
<div class="element-item lou "><a href="https://www.exploreloudoncounty.com/explore/massagestudiotn">
<img src="https://www.exploreloudoncounty.com/explore/massagestudiotn/ms.png">
<hr>
<h3>The Massage Studio<span class="hidden">key words</span></h3>
<p id="hoursmassage"></p></a>
<p><a href="tel:+18657225769">(865) 722-5769</a></p>
<a href="https://www.exploreloudoncounty.com/explore/massagestudiotn"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
</div>
<div class="element-item lou retail"><a href="https://www.exploreloudoncounty.com/explore/purdys">
<img src="https://www.exploreloudoncounty.com/explore/purdys/purdyoem.jpg">
<hr>
<h3>Purdy's Powersports<span class="hidden">motorcycle bike atv dirt motocross</span></h3>
<p id="hourspurdy"></p></a>
<p><a href="tel:+18654087315">(865) 408-7315</a></p>
<a href="https://www.exploreloudoncounty.com/explore/purdys"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
</div>
</div>
JQuery:
// store filter for each group
var buttonFilters = {};
var buttonFilter;
// quick search regex
var qsRegex;
Isotope.Item.prototype._create = function() {
// assign id, used for original-order sorting
this.id = this.layout.itemGUID++;
// transition objects
this._transn = {
ingProperties: {},
clean: {},
onEnd: {}
};
this.sortData = {};
};
Isotope.prototype.arrange = function( opts ) {
// set any options pass
this.option( opts );
this._getIsInstant();
// just filter
this.filteredItems = this._filter( this.items );
// flag for initalized
this._isLayoutInited = true;
};
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
},
});
$('.filters').on( 'click', '.btn', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = $this.attr('data-filter');
// combine filters
buttonFilter = concatValues( buttonFilters );
// Isotope arrange
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}) );
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}