分页实现同位素
我试图在我的WordPress网站上使用分页实现同位素（这对大多数人来说显然是一个问题）。 我想出了一个scheme，如果我能弄清楚一些事情的话可能会起作用。
在我的页面上，我有我的同位素脚本的这部分 –
$('.goforward').click(function(event) { var href = $(this).attr('href'); $('.isotope').empty(); $('.isotope').load(href +".html .isotope > *"); $( 'div.box' ).addClass( 'isotope-item' ); $container.append( $items ).isotope( 'insert', $items, true ); event.preventDefault(); }); 然后我使用这个我从这里修改过的分页函数来实现'goforward'类 –
function isotope_pagination($pages = '', $range = 2) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class='pagination'>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<a href='".get_pagenum_link($i)."' class='inactive goforward'>".$i."</a>":"<a href='".get_pagenum_link($i)."' class='inactive goforward' >".$i."</a>"; } } echo "</div>\n"; } }
第一个问题 – 我有过滤/sorting问题。 它过滤罚款的第一页，但不sorting。 在第二页或任何其他页面加载时，它不会追加/插入，甚至筛选/sorting时，该页面上新鲜开始。 相反，当试图这样做，给了我这个错误 –
Uncaught TypeError: Cannot read property '[object Array]' of undefined
第二个问题 – 加载页面片段时，存在延迟，当前页面在下一个页面片段被加载之前仍然可见。
我知道很多人有同位素和分页的问题，通常最终使用无限滚动，即使同位素作者不推荐它。
所以我的理论是通过load（）加载内容，并有一些callback只显示过滤项目。
任何想法如何实现这一目标？
我的同位素脚本—
$(function () { var selectChoice, updatePageState, updateFiltersFromObject, $container = $('.isotope'); $items = $('.item'); //////////////////////////////////////////////////////////////////////////////////// /// EVENT HANDLERS //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////// // Mark filtering element as active/inactive and trigger filters update $('.js-filter').on( 'click', '[data-filter]', function (event) { event.preventDefault(); selectChoice($(this), {click: true}); $container.trigger('filter-update'); }); ////////////////////////////////////////////////////// // Sort filtered (or not) elements $('.js-sort').on('click', '[data-sort]', function (event) { event.preventDefault(); selectChoice($(this), {click: true}); $container.trigger('filter-update'); }); ////////////////////////////////////////////////////// // Listen to filters update event and update Isotope filters based on the marked elements $container.on('filter-update', function (event, opts) { var filters, sorting, push; opts = opts || {}; filters = $('.js-filter li.active a:not([data-filter="all"])').map(function () { return $(this).data('filter'); }).toArray(); sorting = $('.js-sort li.active a').map(function () { return $(this).data('sort'); }).toArray(); if (typeof opts.pushState == 'undefined' || opts.pushState) { updatePageState(filters, sorting); } $container.isotope({ filter: filters.join(''), sortBy: sorting }); }); ////////////////////////////////////////////////////// // Set a handler for history state change History.Adapter.bind(window, 'statechange', function () { var state = History.getState(); updateFiltersFromObject(state.data); $container.trigger('filter-update', {pushState: false}); }); //////////////////////////////////////////////////////////////////////////////////// /// HELPERS FUNCTIONS //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////// // Build an URI to get the query string to update the page history state updatePageState = function (filters, sorting) { var uri = new URI(''); $.each(filters, function (idx, filter) { var match = /^\.([^-]+)-(.*)$/.exec(filter); if (match && match.length == 3) { uri.addSearch(match[1], match[2]); } }); $.each(sorting, function (idx, sort) { uri.addSearch('sort', sort); }); History.pushState(uri.search(true), null, uri.search() || '?'); }; ////////////////////////////////////////////////////// // Select the clicked (or from URL) choice in the dropdown menu selectChoice = function ($link, opts) { var $group = $link.closest('.btn-group'), $li = $link.closest('li'), mediumFilter = $group.length == 0; if (mediumFilter) { $group = $link.closest('.js-filter'); } if (opts.click) { $li.toggleClass('active'); } else { $li.addClass('active'); } $group.find('.active').not($li).removeClass('active'); if (!mediumFilter) { if ($group.find('li.active').length == 0) { $group.find('li:first-child').addClass('active'); } $group.find('.selection').html($group.find('li.active a').first().html()); } }; ////////////////////////////////////////////////////// // Update filters by the values in the current URL updateFiltersFromObject = function (values) { if ($.isEmptyObject(values)) { $('.js-filter').each(function () { selectChoice($(this).find('li').first(), {click: false}); }); selectChoice($('.js-sort').find('li').first(), {click: false}); } else { $.each(values, function (key, val) { val = typeof val == 'string' ? [val] : val; $.each(val, function (idx, v) { var $filter = $('[data-filter=".' + key + '-' + v + '"]'), $sort = $('[data-sort="' + v + '"]'); if ($filter.length > 0) { selectChoice($filter, {click: false}); } else if ($sort.length > 0) { selectChoice($sort, {click: false}); } }); }); } }; //////////////////////////////////////////////////////////////////////////////////// /// Initialization //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////// // Initialize Isotope $container.imagesLoaded( function(){ $container.isotope({ masonry: { resizesContainer: true }, itemSelector: '.item', getSortData: { date: function ( itemElem ) { var date = $( itemElem ).find('.thedate').text(); return parseInt( date.replace( /[\(\)]/g, '') ); }, area: function( itemElem ) { // function var area = $( itemElem ).find('.thearea').text(); return parseInt( area.replace( /[\(\)]/g, '') ); }, price: function( itemElem ) { // function var price = $( itemElem ).find('.theprice').text(); return parseInt( price.replace( /[\(\)]/g, '') ); } } }); var total = $(".next a:last").html(); var pgCount = 1; var numPg = total; pgCount++; $('.goback').click(function() { $('.isotope').empty(); $('.isotope').load("/page/<?php echo --$paged;?>/?<?php echo $_SERVER["QUERY_STRING"]; ?>.html .isotope > *"); $container.append( $items ).isotope( 'insert', $items, true ); $( 'div.box' ).addClass( 'isotope-item' ); }); $('.goforward').click(function(event) { var href = $(this).attr('href'); $('.isotope').empty(); $('.isotope').load(href +".html .isotope > *"); $( 'div.box' ).addClass( 'isotope-item' ); $container.append( $items ).isotope( 'insert', $items, true ); event.preventDefault(); }); }); ////////////////////////////////////////////////////// // Initialize counters $('.stat-count').each(function () { var $count = $(this), filter = $count.closest('[data-filter]').data('filter'); $count.html($(filter).length); }); ////////////////////////////////////////////////////// // Set initial filters from URL updateFiltersFromObject(new URI().search(true)); $container.trigger('filter-update', {pushState: false}); }); });
你检查了以下链接：
https://codepen.io/Igorxp5/pen/ojJLQE
它有一个与分页同位素的工作实例。
请特别注意JS部分中的以下代码块。
var $container = $('#container').isotope({ itemSelector: itemSelector, masonry: { columnWidth: itemSelector, isFitWidth: true } });
检查下面的链接是否有用
https://mixitup.kunkalabs.com/extensions/pagination/
你也可以使用lazy loder进行分页。
希望这会帮助你
codepen.io/Igorxp5/pen/ojJLQE
这对我来说只是一个小问题，如何添加next / prev分页以及如何添加活动类到分页？
而最后一件事情“缺less或畸形”。 这个文本出现在我的分页菜单后，我不知道这是什么意思。
<a href="http://codepen.io/Igorxp5/pen/ojJLQE"></a>
