繁体   English   中英

如何用砖石设置无限滚动?

[英]How to setup infinite scrolling with masonry?

最近,我在尝试用砌体在tumblr上设置无限滚动时遇到了一些问题。 我找到了一些代码,并且在演示网站上可以正常运行: http : //www.jquery4u.com/demos/infinite-scrolling-demo1/但在我的tumblr上,仅砌体部分有效,而无限滚动部分无效。 这是我的Javascript:

<script>
  $(function(){

    var $container = $('SECTION');

    $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.item',
                columnWidth: '.item',
                isFitWidth: true
            });
        });

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation
      nextSelector : '#nextPage',  // selector for the NEXT link (to page 2)
      itemSelector : '.item',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          msnry.appended( $newElems );
        });
      }
    );
  });
</script>

这是下一页链接的html:

{block:Pagination}
<nav id="page-nav">
    {block:NextPage}
        <a style="color:red;" id="nextPage" href="{NextPage}">Next</a>
    {/block:NextPage}
</nav>
{/block:Pagination}

我已经链接了Masonry,ImageLoaded和Infinite Scrolling脚本。 就像我说的那样,砌体效果很好,但无限滚动似乎根本无济于事。 由于我已经测试了下一个链接,所以它也可以正常工作,确实可以将我带到下一页。 但是无限滚动仍然没有任何作用。 如果有人可以帮助您,将不胜感激,或者如果您有任何其他建议或替代方案,那也很好。

没有演示链接很难说,但请看一下您用作参考的示例:

msnry.appended( $newElems );

应该抛出一个错误,说undefined 这是由于msnry.appended

该行应为:

$container.masonry( 'appended', $newElems, true );

资料来源: http : //www.jquery4u.com/demos/infinite-scrolling-demo1/

如何进行无限滚动<div> ?</div><div id="text_translate"><p> 我试图让这个带有列的 div 无限向下移动 -<a href="https://i.stack.imgur.com/Gjswj.png" rel="nofollow noreferrer">示例</a>,就像在这个谷歌开发者页面上 - <a href="https://developers.google.com/web/updates/2016/07/infinite-scroller" rel="nofollow noreferrer">谷歌开发者</a>|| <a href="https://i.stack.imgur.com/MssUX.png" rel="nofollow noreferrer">无限滚动图像</a>,但如您所见,不成功。 因此,我将&lt;div&gt;称为“imgs”,其中包含一些图像,并且当某些 position 中的“imgs”时,来自 div 底部的图像被移动到顶部,但用户不应该看到它们移动。 以下是我的一些作品: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> let imgsContainer = document.getElementById("imgs"); let imgAppear = document.getElementById("imgAppear"); function imgsContainerMove() { let top = 0; setInterval(imgsContainerMoving, 25); function imgsContainerMoving() { // Animation top++; imgsContainer.style.top = top + '%'; if (top === 100) top = 0; //Top reset if (imgsContainer.style.top == "1%") { Array.from(document.querySelectorAll("div.imgs &gt; img")).slice(-6).forEach((image) =&gt; imgAppear.prepend(image)) //Adding images to the top } } } imgsContainerMove(); // execute function</pre><pre class="snippet-code-css lang-css prettyprint-override"> body{ margin: 0; }.gallery-block { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; background-color: #2B3C35; }.gallery-bg { position: relative; margin: 50px 0; padding: 0 10px; width: 100%; height: 40vh; overflow: hidden; display: flex; justify-content: center; }.gallery-bg.overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: auto; background: rgb(43, 60, 53); background: -moz-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: -webkit-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); }.imgs { position: absolute; width: 75vw; columns: 200px; column-gap: 15px; }.imgs img { width: 100%; margin-bottom: 15px; border-radius: 5px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="gallery-block"&gt; &lt;h2&gt;Gallery&lt;/h2&gt; &lt;img src="img/triangle.png" alt="" class="triang"&gt; &lt;div class="gallery-bg"&gt; &lt;div class="imgs" id="imgs"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;/div&gt; &lt;div class="overlay"&gt;&lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div>

[英]How to make infinite scrolling <div>?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 砌体中的无限滚动 无限滚动+砌体=无法正常工作 以特定速度滚动时的砌体和无限滚动打破布局 如何进行无限滚动? 如何在 React 中实现无限数据的无限滚动? 砌体,FlexSlider和无限滚动 无限卷轴+砌体 无限砌石无效 如何在Rails中实现无限滚动 如何进行无限滚动<div> ?</div><div id="text_translate"><p> 我试图让这个带有列的 div 无限向下移动 -<a href="https://i.stack.imgur.com/Gjswj.png" rel="nofollow noreferrer">示例</a>,就像在这个谷歌开发者页面上 - <a href="https://developers.google.com/web/updates/2016/07/infinite-scroller" rel="nofollow noreferrer">谷歌开发者</a>|| <a href="https://i.stack.imgur.com/MssUX.png" rel="nofollow noreferrer">无限滚动图像</a>,但如您所见,不成功。 因此,我将&lt;div&gt;称为“imgs”,其中包含一些图像,并且当某些 position 中的“imgs”时,来自 div 底部的图像被移动到顶部,但用户不应该看到它们移动。 以下是我的一些作品: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> let imgsContainer = document.getElementById("imgs"); let imgAppear = document.getElementById("imgAppear"); function imgsContainerMove() { let top = 0; setInterval(imgsContainerMoving, 25); function imgsContainerMoving() { // Animation top++; imgsContainer.style.top = top + '%'; if (top === 100) top = 0; //Top reset if (imgsContainer.style.top == "1%") { Array.from(document.querySelectorAll("div.imgs &gt; img")).slice(-6).forEach((image) =&gt; imgAppear.prepend(image)) //Adding images to the top } } } imgsContainerMove(); // execute function</pre><pre class="snippet-code-css lang-css prettyprint-override"> body{ margin: 0; }.gallery-block { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; background-color: #2B3C35; }.gallery-bg { position: relative; margin: 50px 0; padding: 0 10px; width: 100%; height: 40vh; overflow: hidden; display: flex; justify-content: center; }.gallery-bg.overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: auto; background: rgb(43, 60, 53); background: -moz-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: -webkit-linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); background: linear-gradient(0deg, rgba(43, 60, 53, 1) 0%, rgba(1, 2, 2, 0) 50%, rgba(43, 60, 53, 1) 100%); }.imgs { position: absolute; width: 75vw; columns: 200px; column-gap: 15px; }.imgs img { width: 100%; margin-bottom: 15px; border-radius: 5px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="gallery-block"&gt; &lt;h2&gt;Gallery&lt;/h2&gt; &lt;img src="img/triangle.png" alt="" class="triang"&gt; &lt;div class="gallery-bg"&gt; &lt;div class="imgs" id="imgs"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;img src="https://i.picsum.photos/id/244/300/200.jpg?hmac=EveIsD4iO8woArdqcsJM76yYG6rwDR7OmPuPRwxh_1w"&gt; &lt;/div&gt; &lt;div class="overlay"&gt;&lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div>
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM