如何解决尝试使用OR逻辑将同位素过滤器与分页集成
我遇到一个困难的问题，试图解决我的过滤器无法正确显示正确项目的问题。点按一个选择时，尽管该元素具有正确的类名，但它无法正确显示正确的项目。
当我在选项列表中选择beige时，它会正确过滤。只有当我选择下一个要过滤的项目yellow时，它才会显示上一个颜色beige
如果使用OR逻辑结合，分页功能就会中断
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var inclusives = [];
var exclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each( function( i,elem ) {
// if checkbox,use value if checked
if ( elem.checked ) {
selector = '.'+elem.value + ' ';
// selector += '.'+elem.value + ' ';
inclusives.push(selector);
}
});
// smash all values back together for 'OR' filtering
filterValue = inclusives.length ? inclusives.join(',') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
$container.isotope({ filter: filterValue });
changeFilter(filterValue);
}
如果我尝试使用AND逻辑，则带有分页功能的过滤器可以正常工作
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var exclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each(function (i,elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
changeFilter(filterValue);
}
var itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var $container = $('.products-container').isotope({ itemSelector: itemSelector });
//Ascending order
var responsiveIsotope = [ [480,3],[720,5] ];
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
// update items based on current filters
function changeFilter(selector) { $container.isotope({ filter: selector }); }
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var inclusives = [];
var exclusives = [];
// for each box checked,use value if checked
if ( elem.checked ) {
selector = '.'+elem.value + ' ';
// selector += '.'+elem.value + ' ';
inclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = inclusives.length ? inclusives.join(',') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
$container.isotope({ filter: filterValue });
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for( var i = 0; i < responsiveIsotope.length; i++ ) {
if( $(window).width() <= responsiveIsotope[i][0] ) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each(function (i,elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'OR' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function(){
// increment page if a new one is needed
if( item > itemsPerPage ) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length-1];
// last class shorter than 4 will be a page number,if so,grab and replace
if(lastClass.length < 4){
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number,add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
if(currentNumberPages > 1){
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll(){
$checkboxes.each(function (i,elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function(){
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function(){clearAll()});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.centered-component {
width : 100%;
max-width : 1300px;
margin : 0 auto;
display : flex;
flex-wrap : wrap;
padding : 100px 0;
}
.centered-component .filter-sidebar {
width : 100%;
max-width : 250px;
margin-right : 24px;
}
.centered-component .content-block {
flex : 1;
}
.filter-sidebar {
display : flex;
flex-direction: column;
}
.products-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap : 24px;
}
.isotope-container > h2{
margin-bottom :48px;
}
.products-item {
position: relative !important;
top : initial !important;
left : initial !important;
}
.products-container {
height : initial !important;
}
.isotope-pager {
margin-top : 42px;
}
.isotope-container + .isotope-container {
margin-top : 64px;
}<!doctype html>
<html>
<head>
<title>Isotope</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="centered-component">
<div class="filter-sidebar">
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="beige" />
beige
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="green" />
green
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="blue" />
blue
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="orange" />
orange
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="purple" />
purple
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="pink" />
pink
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="teal" />
teal
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="yellow" />
yellow
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="black" />
black
</label>
</div>
<div class="content-block">
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="filter.js "></script>
</body>
</html>解决方法
您的setPagination和goToPage函数存在问题。您没有正确设置过滤器选择器，如果您希望两个页面都正常运行，则它们都应使用类似的项目过滤器来确定当前过滤器。
我已经更新了两个函数来解决该问题，但是您仍然需要进行一些重构，以将常见的过滤器创建函数移到单独的函数中并在两个地方使用它。
var itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var $container = $('.products-container').isotope({
itemSelector: itemSelector
});
//Ascending order
var responsiveIsotope = [
[480,3],[720,5]
];
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
// update items based on current filters
function changeFilter(selector) {
$container.isotope({
filter: selector
});
}
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var inclusives = [];
var exclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each(function(i,elem) {
// if checkbox,use value if checked
if (elem.checked) {
inclusives.push(elem.value);
}
});
// smash all values back together for 'and' filtering and add page number to the string of filters
filterValue = inclusives.length ?
inclusives.map(f => `.${f}.${currentPage}`).join(',') :
`*.${currentPage}`;
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for (var i = 0; i < responsiveIsotope.length; i++) {
if ($(window).width() <= responsiveIsotope[i][0]) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function() {
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var inclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each(function(i,elem) {
if (elem.checked) {
var selector = `${itemSelector}.${elem.value}`;
inclusives.push(selector);
}
});
// smash all values back together for 'OR' filtering
filterValue = inclusives.length ? inclusives.join(',') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function() {
// increment page if a new one is needed
if (item > itemsPerPage) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length - 1];
// last class shorter than 4 will be a page number,if so,grab and replace
if (lastClass.length < 4) {
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number,add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ($('.' + pagerClass).length == 0) ? $('<div class="' + pagerClass + '"></div>') : $('.' + pagerClass);
$isotopePager.html('');
if (currentNumberPages > 1) {
for (var i = 0; i < currentNumberPages; i++) {
var $pager = $('<a href="javascript:void(0);" class="pager" ' + pageAttribute + '="' + (i + 1) + '"></a>');
$pager.html(i + 1);
$pager.click(function() {
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll() {
$checkboxes.each(function(i,elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function() {
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function() {
clearAll()
});/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.centered-component {
width: 100%;
max-width: 1300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 100px 0;
}
.centered-component .filter-sidebar {
width: 100%;
max-width: 250px;
margin-right: 24px;
}
.centered-component .content-block {
flex: 1;
}
.filter-sidebar {
display: flex;
flex-direction: column;
}
.products-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 24px;
}
.isotope-container>h2 {
margin-bottom: 48px;
}
.products-item {
position: relative !important;
top: initial !important;
left: initial !important;
}
.products-container {
height: initial !important;
}
.isotope-pager {
margin-top: 42px;
}
.isotope-container+.isotope-container {
margin-top: 64px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<!--script src="filter.js "></script-->
<div class="centered-component">
<div class="filter-sidebar">
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="beige" />
beige
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="green" />
green
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="blue" />
blue
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="orange" />
orange
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="purple" />
purple
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="pink" />
pink
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="teal" />
teal
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="yellow" />
yellow
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="black" />
black
</label>
</div>
<div class="content-block">
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
</div>
</div>,
问题是由于在附加页码之前选择器中有尾随空格，这使最后选择的元素的选择器始终无效；例如，选择米色，然后选择绿色，则显示：
.beige,.green .1
应该在哪里（如果我知道您使用的页面正确！）
.beige,.green.1
在添加页码之前，请不要删除尾随空格
function goToPage(n) {
...
// add page number to the string of filters
var wordPage = currentPage.toString();
if (filterValue.endsWith(' '))
filterValue = filterValue.slice(0,-1)
filterValue += ('.'+wordPage);
$container.isotope({ filter: filterValue });
changeFilter(filterValue);
}
或者简单地在将选择器推入包含数组时不要在选择器的末尾添加空格
,为inclusives函数（使用OR过滤器）使用goToPage方法工作的代码如下：
（1）由于类不能以CSS中的数字开头（必须以字母，下划线或连字符开头），因此要为您当前所在的Page添加一个类，它应该为._1或{{ 1}}。代码更改可能看起来像这样：
._2（2）var wordPage = currentPage.toString();
filterValue += (',._'+wordPage); // ensures that classes are .black,._1
函数应该对使用pageNumber的类进行相同的操作
setPagination进行上述两个更改，使代码正常工作。
wordPage = '_'+page.toString(); // added _ to make the class ._1 for page 1
在Potential Issue函数中，当前页面被设置为goToPage(n)的值。
但是，当您从2个不同的页面中选择2种不同的颜色时，这些类应如下所示：
n它显示.black,.pink,_.1,._2
。
.black,._1类从不显示。
我认为可以根据颜色所属的类别动态地向._2函数赋予goToPage的值。
但是我会把它留给您，我认为您仍在编写这段代码。
附加了代码段。
nvar itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var $container = $('.products-container').isotope({ itemSelector: itemSelector });
//Ascending order
var responsiveIsotope = [ [480,5] ];
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
// update items based on current filters
function changeFilter(selector) { $container.isotope({ filter: selector }); }
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var inclusives = [];
var exclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each( function( i,elem ) {
// if checkbox,use value if checked
if ( elem.checked ) {
selector = '.'+elem.value + ' ';
// selector += '.'+elem.value + ' ';
inclusives.push(selector);
}
});
console.log("inclusives",inclusives);
// console.log("exclusives",exclusives);
// smash all values back together for 'and' filtering
filterValue = inclusives.length ? inclusives.join(',') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += (',._'+wordPage);
console.log("filterValue",filterValue);
$container.isotope({ filter: filterValue });
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for( var i = 0; i < responsiveIsotope.length; i++ ) {
if( $(window).width() <= responsiveIsotope[i][0] ) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked,add its value and push to array
$checkboxes.each(function (i,elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'OR' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function(){
// increment page if a new one is needed
if( item > itemsPerPage ) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = '_'+page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length-1];
// last class shorter than 4 will be a page number,grab and replace
if(lastClass.length < 4){
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number,add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
if(currentNumberPages > 1){
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll(){
$checkboxes.each(function (i,elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function(){
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function(){clearAll()});/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.centered-component {
width : 100%;
max-width : 1300px;
margin : 0 auto;
display : flex;
flex-wrap : wrap;
padding : 100px 0;
}
.centered-component .filter-sidebar {
width : 100%;
max-width : 250px;
margin-right : 24px;
}
.centered-component .content-block {
flex : 1;
}
.filter-sidebar {
display : flex;
flex-direction: column;
}
.products-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap : 24px;
}
.isotope-container > h2{
margin-bottom :48px;
}
.products-item {
position: relative !important;
top : initial !important;
left : initial !important;
}
.products-container {
height : initial !important;
}
.isotope-pager {
margin-top : 42px;
}
.isotope-container + .isotope-container {
margin-top : 64px;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
