javascript - Packery + Infinitescroll + imagesLoaded = not working -
i've been trying packery , infinitescroll jquery plugins working, reason new elements appear on top of each other.
i directed imagesloaded plugin, reason seems overlay elements on top of 1 another. applied fix smart scroll plugin jquery 1.9 (https://github.com/lukeshumard/smartscroll/pull/2) however, believe problem lies imagesloaded , packery.
my script looks this:
$(document).ready(function() { // declaring variables var $sidebar = $("#sidebarholder"), $sidebarwidth = $sidebar.width(), $window = $(window), $windowheight = $window.height(), $offset = $sidebar.offset(), $toppadding = $("#sitewide").height(), $container = $('#container.clearfix'); // making sure sidebar stays right size when it's resized $(window).on("resize",function () { $("[role=sidebar]").width($sidebarwidth).show(); $("#sidebarholder,[role=sidebar]").height($windowheight + 20); }).resize(); // scroll 'stick top' function $(window).on("scroll",function() { if ($window.scrolltop() > $offset.top) { $sidebar.addclass('sticky'); }else{ $sidebar.removeclass('sticky'); } }).scroll(); $container.packery({ itemselector:'article.item', columnwidth:"div.grid-sizer", rowheight:"div.grid-sizer", gutter:"div.gutter-sizer", transitionduration:'0.2s' }); $container.infinitescroll({ navselector:'div.paginate', nextselector:'div.paginate a.next', itemselector:'article.item', loading:{ finishedmsg:'no more pages load.' } }, function(newelements) { $(newelements).imagesloaded(function(){ $container.packery('appended', newelements); }); }); });
any appreciated.
if necessary can set jsbin or codepen.
seems problem chrome canary, it's working in other browsers...
Comments
Post a Comment