Good day! Please help! The question is as follows. Used by Masonry & Infinite Ajax Scroll. Everything works stably, except for one. The page displays two blocks (left and right). When scrolling the page, the next two blocks are also loaded below. But it turns out that the blocks are loaded, superimposed on the first two, and then immediately become / line up lower, as it should be. We scroll the page: the next two blocks are also loaded, first superimposed on the first two, and immediately immediately after that they are rearranged down. And so with all the other blocks. I apologize for the pun, I tried to explain in detail. I connect the scripts as follows:

<script type="text/javascript" src="{THEME}/js/jquery.ias.min.js"></script> <script type="text/javascript" src="{THEME}/js/masonry.js"></script> <script type="text/javascript"> var container = document.querySelector('#container'); var msnry = new Masonry( container, { // options columnWidth: 482, isResizable: true, isFitWidth: true, itemSelector: '.block-shortstory', gutter: 0 }); var ias = $.ias({ container: "#container", item: ".block-shortstory", pagination: "#page_navigation", next: ".page_navigation a", delay: 1200 }); ias.on('render', function(items) { $(items).css({ opacity: 1 }); }); ias.on('rendered', function(items) { msnry.appended(items); }); ias.extension(new IASSpinnerExtension()); ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Всё!</em></p></div>'})); </script>
  • Please close the issue resolved. It was necessary to opacity: put 0. - LADY X
  • You can delete the question yourself - ixSci
  • If possible, publish the solution found in response to your question . I am sure it will help many of your colleagues in the future. - Nicolas Chabanovsky ♦

1 answer 1

The issue is resolved. It was necessary opacity: put 0

 $(items).css({ opacity: 0 });
  • So he is there in one place, it is simply impossible to make a mistake) - LADY X