jquery - jQuery Isotope 垂直布局开始时未格式化
问题描述
我使用 2 个 div 来显示“fitRows”布局（网格）或“垂直”（列表）布局。显然，我最终将信息复制到单独的网格中，我确信这并不理想。但是我没有时间想出一种重复性较低的做事方式，这不是手头的实际问题。我的问题是，当我单击列表视图按钮时，会出现列表，但所有内容都折叠在自身之上 - 没有格式。一旦我单击排序按钮，事情就会正确重置。但是当那个 div 最初出现时，它是一团糟。我猜它在某个地方的 js 中，但此时我的大脑很痛。我希望这里有人可以让我指出正确的方向。快到了。但不是……很。
注意：我还在一个单独的问题中询问是否可以结合过滤和排序。目前，就这个特定问题而言，这不是当前的问题。点击右上角的列表按钮就会出现这里要解决的问题
// Switch between grid & list views
jQuery($ => {
$('.showSingle').click(e => {
e.preventDefault();
$('.content').hide();
let targetSelector = $(e.currentTarget).attr('href');
$(targetSelector).show();
});
});
// end Switch between grid & list views
// external js: isotope.pkgd.js
// Isotope Grid View
var $grid = $('#div1 .grid').isotope({
itemSelector: '#div1 .portfolio-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.status',
size: '.size parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// filter functions
// bind filter button click
$('#div1 #filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$('#div1 #sorts').on( 'click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
$grid.isotope({ sortBy: sortValue });
});
// change is-checked class on buttons
$('#div1 .btn-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
// end Isotope Grid View
// Isotope List View
var $table = $('#div2 .table-like').isotope({
layoutMode: 'vertical',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '.category',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// bind sort button click
$('#div2 #sorts').on( 'click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
$table.isotope({ sortBy: sortValue });
});
// change is-checked class on buttons
$('#div2 .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');
});
});
//end Isotope List View.content {
display: none;
}
#div1 {
display: block;
}
/* Portfolio */
#div1 #isotope-sort-filter {
position: relative;
padding-top: 3rem;
}
#div1 .btn {
display: inline-block;
padding: 0.5em 1.0em;
cursor: pointer;
text-transform: uppercase;
}
#div1 .btn:hover {
/*background-color: #8CF;
color: #222;*/
}
#div1 .btn:active,
#div1 .btn.is-checked {
/*background-color: #28F;*/
}
#div1 .btn.is-checked {
/*color: white;*/
}
#div1 .btn:active {
/*box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);*/
}
/* ---- button-group ---- */
#div1 .btn-group {
padding-bottom: 2rem;
}
#div1 .btn-outline-primary {
color: #32587d;
border-color: #32587d;
border-radius: 0;
}
#div1 .btn-outline-primary.active,
#div1 .btn-outline-primary:active,
#div1 .btn-group > .btn:hover {
color: #fff;
background-color: #32587d;
border-color: #32587d;
}
/* ---- grid ---- */
#div1 .grid {
/*border: 1px solid #333;*/
}
/* clear fix */
#div1 .grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .portfolio-item ---- */
#div1 .portfolio-item {
position: relative;
float: left;
width: calc(25% - 20px);
height: auto;
padding: 1.25rem;
background: #fff;
color: #32587d;
cursor: pointer;
transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-webkit-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
}
#div1 .portfolio-item:nth-of-type(1):hover,
#div1 .portfolio-item:nth-of-type(5):hover {
background: #32587d;
color: #fff;
}
#div1 .portfolio-item:nth-of-type(2):hover,
#div1 .portfolio-item:nth-of-type(6):hover {
background: #b5c1af;
color: #fff;
}
#div1 .portfolio-item:nth-of-type(3):hover,
#div1 .portfolio-item:nth-of-type(7):hover {
background: #c88362;
color: #fff;
}
#div1 .portfolio-item:nth-of-type(4):hover,
#div1 .portfolio-item:nth-of-type(8):hover {
background: #e0c094;
color: #fff;
}
#div1 .portfolio-item > * {
margin: 0;
}
#div1 .portfolio-item .state,
#div1 .portfolio-item .city {
font-size: 1rem;
font-weight: 400;
color: #32587d;
}
#div1 .portfolio-item:hover .state,
#div1 .portfolio-item:hover .city {
color: #fff;
}
#div1 .portfolio-item .city {
padding-bottom: 1.25rem;
}
#div1 .portfolio-item .name {
font-size: 1.5rem;
font-weight: 700;
color: #32587d;
}
#div1 .portfolio-item:hover .name {
color: #fff;
}
#div1 .portfolio-item .stores,
#div1 .portfolio-item .store-size,
#div1 .portfolio-item .trade,
#div1 .portfolio-item .acreage,
#div1 .portfolio-item .status {
font-size: 1rem;
font-weight: 400;
color: #5f5d5c;
}
#div1 .portfolio-item:hover .stores,
#div1 .portfolio-item:hover .store-size,
#div1 .portfolio-item:hover .trade,
#div1 .portfolio-item:hover .acreage,
#div1 .portfolio-item:hover .status {
color: #fff;
}
#div1 .portfolio-item .status {
padding-bottom: 2rem;
display: none;
}
#div1 .portfolio-item .visit a {
color: #32587d;
text-decoration: none;
text-transform: uppercase;
font-size: .75rem;
font-weight: 400;
padding-bottom: 2rem;
}
#div1 .portfolio-item .visit a:hover {
opacity: .7;
}
#div1 .portfolio-item:hover .visit a {
color: #fff;
}
/* List View */
#div2 .button {
display: inline-block;
padding: 0.5em 1.0em;
margin-bottom: 10px;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
cursor: pointer;
}
#div2 .button:hover {
background-color: #8CF;
color: #222;
}
#div2 .button:active,
#div2 .button.is-checked {
background-color: #28F;
}
#div2 .button.is-checked {
color: white;
}
#div2 .button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
#div2 .button-group:after {
content: '';
display: block;
clear: both;
}
#div2 .button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}
#div2 .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
#div2 .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- table-like ---- */
#div2 .table-like {
background: #DDD;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
}
/* clear fix */
#div2 .table-like:after {
content: '';
display: block;
clear: both;
}
/* ---- vertical table-like ---- */
#div2 .table-like__item {
width: 100%;
clear: both;
border-top: 1px solid;
}
#div2 .table-like__item > * {
display: inline-block;
padding: 4px 4px;
}
#div2 .table-like__item .name { width: 30%; }
#div2 .table-like__item .symbol { width: 10%; }
#div2 .table-like__item .weight { width: 15%; }
#div2 .table-like__item .number { width: 10%; }
#div2 .table-like__item .category { width: 20%; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<section id="content" class="container">
<div class="row">
<div class="col-10">
<p>You can sort our properties below by clicking on the buttons.</p>
</div>
<div class="col-2 d-flex">
<div class="d-grid gap-2 d-md-block ms-auto">
<a class="btn btn-primary showSingle float-right" href="#div1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
<a class="btn btn-primary showSingle float-right" href="#div2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>
</div>
</div>
</section>
<div id="div1" class="content module in">
<div id="isotope-sort-filter" class="container targetDiv" style="display:block;">
<div class="row main-area">
<div class="col-12 col-md-6">
<h2 class="text-uppercase blue-text">Filter</h2>
<div id="filters" class="btn-group filter-by-button-group">
<button class="btn btn-outline-primary active" data-filter="*">show all</button>
<button class="btn btn-outline-primary" data-filter=".mall">malls</button>
<button class="btn btn-outline-primary" data-filter=".open">open air centers</button>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="text-uppercase blue-text">Sort</h2>
<div id="sorts" class="btn-group sort-by-button-group">
<button class="btn btn-outline-primary active" data-sort-value="original-order">all centers by state</button>
<button class="btn btn-outline-primary" data-sort-value="name">by mall name</button>
<button class="btn btn-outline-primary" data-sort-value="size">by sq. ft. size</button>
</div>
</div>
</div>
<div class="row row-eq-height module">
<div class="grid">
<div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
<h3 class="state">AL</h3>
<p class="name">Parkway Place</p>
<p class="city">Huntsville</p>
<p class="stores">Number of Stores: 90</p>
<p class="store-size"><span class="size">643,135</span> sq. ft.</p>
<p class="trade">Trade Area: 652,740</p>
<p class="acreage">Acreage: 34±</p>
<p class="status">open</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item open" data-category="open" onclick="location.href='#';">
<h3 class="state">CA</h3>
<p class="name">Imperial Valley Mall</p>
<p class="city">El Centro</p>
<p class="stores">Number of Stores: 65</p>
<p class="store-size"><span class="size">826,094</span> sq. ft.</p>
<p class="trade">Trade Area: 400,900</p>
<p class="acreage">Acreage: 157±</p>
<p class="status">closed</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item open" data-category="open" onclick="location.href='#';">
<h3 class="state">FL</h3>
<p class="name">Hammock Landing</p>
<p class="city">West Melbourne</p>
<p class="stores">Number of Stores: 56</p>
<p class="store-size"><span class="size">562,681</span> sq. ft.</p>
<p class="trade">Trade Area: 335,559</p>
<p class="acreage">Acreage: 108±</p>
<p class="status">open</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
<h3 class="state">FL</h3>
<p class="name">The Pavilion at Port Orange</p>
<p class="city">Port Orange</p>
<p class="stores">Number of Stores: ??</p>
<p class="store-size"><span class="size">297,094</span> sq. ft.</p>
<p class="trade">Trade Area: 525,353</p>
<p class="acreage">Acreage: ??</p>
<p class="status">closed</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
<h3 class="state">FL</h3>
<p class="name">Volusia Mall</p>
<p class="city">Daytona Beach</p>
<p class="stores">Number of Stores: 120</p>
<p class="store-size"><span class="size">844,193</span> sq. ft.</p>
<p class="trade">Trade Area: 667,704</p>
<p class="acreage">Acreage: 90±</p>
<p class="status">open</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item open" data-category="open" onclick="location.href='#';">
<h3 class="state">GA</h3>
<p class="name">Arbor Place</p>
<p class="city">Douglasville</p>
<p class="stores">Number of Stores: 125</p>
<p class="store-size"><span class="size">1,163,256</span> sq. ft.</p>
<p class="trade">Trade Area: 851,814</p>
<p class="acreage">Acreage: 125±</p>
<p class="status">closed</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
<h3 class="state">GA</h3>
<p class="name">The Landing at Arbor Place</p>
<p class="city">Douglasville</p>
<p class="stores">Number of Stores: 23</p>
<p class="store-size"><span class="size">162,954</span> sq. ft.</p>
<p class="trade">Trade Area: 851,814</p>
<p class="acreage">Acreage: 44±</p>
<p class="status">open</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
<div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
<h3 class="state">GA</h3>
<p class="name">The Outlet Shoppes at Atlanta</p>
<p class="city">Woodstock</p>
<p class="stores">Number of Stores: ??</p>
<p class="store-size"><span class="size">1,928,940</span> sq. ft.</p>
<p class="trade">Trade Area: ??</p>
<p class="acreage">Acreage: ??</p>
<p class="status">closed</p>
<p class="visit"><a href="#">Visit this Property</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="div2" class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10">
<div id="sorts" class="button-group">
<button class="button is-checked" data-sort-value="original-order">original order</button>
<button class="button" data-sort-value="name">name</button>
<button class="button" data-sort-value="symbol">symbol</button>
<button class="button" data-sort-value="number">number</button>
<button class="button" data-sort-value="weight">weight</button>
<button class="button" data-sort-value="category">category</button>
</div>
<ul class="table-like">
<li class="table-like__item">
<div class="name">Mercury</div>
<div class="symbol">Hg</div>
<div class="number">80</div>
<div class="weight">200.59</div>
<div class="category">transition</div>
</li>
<li class="table-like__item">
<div class="name">Tellurium</div>
<div class="symbol">Te</div>
<div class="number">52</div>
<div class="weight">127.6</div>
<div class="category">metalloid</div>
</li>
<li class="table-like__item">
<div class="name">Bismuth</div>
<div class="symbol">Bi</div>
<div class="number">83</div>
<div class="weight">208.980</div>
<div class="category">post-transition</div>
</li>
<li class="table-like__item">
<div class="name">Lead</div>
<div class="symbol">Pb</div>
<div class="number">82</div>
<div class="weight">207.2</div>
<div class="category">post-transition</div>
</li>
<li class="table-like__item">
<div class="name">Gold</div>
<div class="symbol">Au</div>
<div class="number">79</div>
<div class="weight">196.967</div>
<div class="category">transition</div>
</li>
<li class="table-like__item">
<div class="name">Potassium</div>
<div class="symbol">K</div>
<div class="number">19</div>
<div class="weight">39.0983</div>
<div class="category">alkali</div>
</li>
<li class="table-like__item">
<div class="name">Sodium</div>
<div class="symbol">Na</div>
<div class="number">11</div>
<div class="weight">22.99</div>
<div class="category">alkali</div>
</li>
<li class="table-like__item">
<div class="name">Cadmium</div>
<div class="symbol">Cd</div>
<div class="number">48</div>
<div class="weight">112.411</div>
<div class="category">transition</div>
</li>
</ul>
</div>
</div>
</div>
</div>解决方案
推荐阅读
- python-3.x - 将python字符串转换为变量
- javascript - 使用 jQuery 仅更新同一 div 类中的一个元素
- javascript - 有什么方法可以声明事件对象而不是函数的参数？
- sqlalchemy - 将关系视为字符串列表
- javascript - 如何对对象数组中的值进行分组和求和？
- c - c 和 valgrind - 为什么在没有 free 的情况下使用 malloc 时没有内存泄漏
- powershell - 有没有更快的方法通过 powershell 运行 SQL 比较？
- assembly - 试图反转 HLSL 像素着色器
- html - 加载一次页面后，我的 iPhone 11 Pro 上的 Safari 不再遵循我的 CSS 代码？
- android - 将 HashMap 的 Arraylist 转换为 Json 字符串 (GSON)