jquery - 同位素 js 加载失败
问题描述
我的问题是,当我加载 Isotope.js 网格时,它会以垂直线加载。我希望它水平加载。当我在第一次单击后单击任何按钮时,它会水平对齐 - 这是我想要的方式。
我在加载时隐藏文本并使用 Jquery。
这是代码:
$( document ).ready(function(){
$('.grid').hide();
});
$('.button-group').click(function(){
$('.grid').show(500);
});
// init Isotope
var iso = new Isotope( '.grid', {
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if name ends with -ium
tool: function( itemElem ) {
var name = itemElem.querySelector('.name').textContent;
return name.match( /tool$/ );
}
};
// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener( 'click', function( event ) {
// only work with buttons
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
var filterValue = event.target.getAttribute('data-filter');
// use matching filter function
filterValue = filterFns[ filterValue ] || filterValue;
iso.arrange({ filter: filterValue });
});
// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
var buttonGroup = buttonGroups[i];
}
var $items = $grid.find('.grid-item');
$grid.addClass('is-showing-items')
.isotope( 'revealItemElements', $items );
// reveal all items after init
var $items = $grid.find('.grid-item');
$grid.addClass('is-showing-items')
.isotope( 'revealItemElements', $items );
<body>
<div class="wrapper">
<div class="row button-group filters-button-group">
<button class="col-4 toolkit rounded" data-filter=".tool">Food </button>
<button class="col-4 education rounded" data-filter=".edu">Name</button>
<button class="col-4 favourites rounded" data-filter=".fav">Color</button>
</div>
</div>
<div class="wrapper grid">
<div class="wrapper">
<div class="row toolkit-fly content grid">
<div class="col-1 rounded tool element-item grid-item" data-category="transition">pizza</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Stuff like tofu</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Crackers</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Cheesey</div>
<div class="wrapper">
<div class="row education-fly content grid">
<div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Marisa</div>
<div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Zack</div>
</div>
</div>
<div class="wrapper">
<div class="row favourites-fly content grid">
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Sunset</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Yellow</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Orange</div>
</div>
</div>
</div>
解决方案
它现在正在工作。
评论$('.grid').hide();
和$('.grid').show(500);
。
首先使用 css 隐藏所有 div。
.cust-hidden{visibility: hidden;}
var iso;
$( document ).ready(function(){
//$('.grid').hide();
// init Isotope
iso = new Isotope( '.grid', {
itemSelector: '.element-item', layoutMode: 'fitRows'
});
$('.grid').addClass('cust-hidden');
});
$('.button-group').click(function(){
//$('.grid').show(500);
$('.grid').removeClass('cust-hidden');
});
// filter functions
var filterFns = {
// show if name ends with -ium
tool: function( itemElem ) {
var name = itemElem.querySelector('.name').textContent;
return name.match( /tool$/ );
}
};
// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener( 'click', function( event ) {
// only work with buttons
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
var filterValue = event.target.getAttribute('data-filter');
// use matching filter function
filterValue = filterFns[ filterValue ] || filterValue;
iso.arrange({ filter: filterValue });
});
// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
var buttonGroup = buttonGroups[i];
}
.cust-hidden{
visibility: hidden;
}
<script src="https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="row button-group filters-button-group">
<button class="col-4 toolkit rounded" data-filter=".tool">Food </button>
<button class="col-4 education rounded" data-filter=".edu">Name</button>
<button class="col-4 favourites rounded" data-filter=".fav">Color</button>
</div>
</div>
<div class="wrapper grid">
<div class="wrapper">
<div class="row toolkit-fly content grid">
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Cheese</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Bread</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Gouda</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">blue cheese</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">lard</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">tacos</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">pizza</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Stuff like tofu</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Tofu</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Crackers</div>
<div class="col-1 rounded tool element-item grid-item" data-category="transition">Cheesey</div>
<div class="wrapper">
<div class="row education-fly content grid">
<div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Marisa</div>
<div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Zack</div>
<div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Lorna</div>
</div>
</div>
<div class="wrapper">
<div class="row favourites-fly content grid">
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Sunset</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Yellow</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Orange</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Red</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Green</div>
<div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Blue</div>
</div>
</div>
</div>
推荐阅读
- php - PHP - IMAP - 是否可以从已发送的电子邮件中获取收件人电子邮件地址?
- vuejs2 - How to access to the vue store in the asyncData function of nuxt
- javascript - Linking functions with Promises in React
- archlinux - 无法在 texstudio 中运行 pdflatex
- java - org.springframework.core.convert.converter.Converter 将一些类转换为一个(或类+参数为一个类)
- sql - SQL query equality comparison with special character that is equal to everything
- paypal - PayPal API 错误 INVALID_PROFILE_ID
- reactjs - ReactJs 上的 Axios 未在 POST 请求中发送 BLOB
- json - 如何解码在 JSON 字符串中找到的 base 64 字符串以生成 UIImage?
- bash - 列出目录中文件的 Bash 脚本不起作用