jquery - 在 Tumblr 中，如何消除砌体中的垂直间隙并使其无限滚动？

Question

这是我第一次使用 stackoverflow。在过去的几天里，以下问题让我发疯了。我真的希望能从这里找到一些帮助。

我目前正在创建自己的 Tumblr 主题。我正在使用 Masonry，今天我可以使用无限滚动。但我遇到以下问题。

我的 Tumblr 网站是http://bojagicollection.tumblr.com/我正在使用 chrome。

图像之间存在垂直间隙，并且图像的一小部分放置在下一张图像的顶部。我没有设置边距或填充。但是我给了每个容器百分比宽度（25％）......我真的想摆脱空白并以准确的方式排列它们。
关于内容在我向下滚动到无限滚动开始后显示的内容。如您所见，我在每个容器上添加了悬停效果，但它仅适用于在初始页面中移位的容器。该效果不适用于出现无限滚动效果的容器。如何为这些容器添加相同的效果？

您的帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
{block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description}

<title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>

<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/>

<link rel="stylesheet" href="http://static.tumblr.com/fwamms6/ZFamvxw9s/reset.css" />


<style>

body {
    background-color: white;
    color: black;
    font-family: "arial"";
    font-size: 1em;
}

a {
    color: blue;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

p {
    color: black;
    font-size:1em;
}

ul {
    list-style: none;
    margin:0px;
}

li {
    display: block;
    margin-left:0px;
}

img {
    max-width:100%;
}




//layout//

#content {
    width:100%;
}


.container{
    width:25%;
    float:left;
    overflow:hidden;
    padding:0;
}
.caption {
      position: absolute;
      top: 0;
      left: 0;
      background-color:black;
      opacity:0.2;
      width: 100%;
      height: 100%;
}

.captiona {
      display:none;
      position: absolute;
      top: 0;
      left: 0;
}



</style>

</head>

<body>

    <header id="masthead">
        <img src="{PortraitURL-128}"/>
        <h1><a href="/" title="{lang:Home}">{Title}aab</a></h1>

    </header>


<div id="content">


    {block:Posts}
    <div class="container">
    <div class="caption">
        <ul>


        </ul>
    </div>

    <div class="captiona">
        <ul>

            <li>{LikeButton color="black"}</li>
            <li>{ReblogButton color="black"}</li>
             <li>{block:Caption}{Caption}{/block:Caption}</li>
            <li>{block:PostNotes}{PostNotes} {/block:PostNotes}</li>
            <li>{block:ContentSource}
    <a href="{SourceURL}">
    a
    </a>
{/block:ContentSource}</li>
        </ul>
    </div>

        {block:Photo}

            {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}


        {/block:Photo}



     </div>
    {/block:Posts}
    {block:Pagination}

        <nav class="pagination">
           {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
           {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
        </nav>
        {/block:Pagination}
</div>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/fwamms6/W8tmvy2eq/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fwamms6/F9lmvy2fb/masonry.pkgd.min.js"></script>
<script src="http://static.tumblr.com/fwamms6/WZfmvy2gd/jquery.infinitescroll.min.js"></script>


<script type="text/javascript">
$(function(){
var container = $('#content');

container.imagesLoaded( function(){
    container.masonry({
        itemSelector : '.container'
    });
});

container.infinitescroll({
      navSelector  : '.pagination',    
      nextSelector : '.pagination a',
      itemSelector : '.container',
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
          $newElems.animate({ opacity: 1 });
          container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
});
</script>

<script type="text/javascript">
        $(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
    </script>


<script type="text/javascript">
$(document).ready(function() {
    $('.container').hover(
            function(){
                $(this).find('.caption').fadeOut(250);
            },
            function(){
                $(this).find('.caption').fadeIn(250);
            }
        );
  });

</script>

<script type="text/javascript">
$(document).ready(function() {
    $('.container').hover(
            function(){
                $(this).find('.captiona').fadeIn(250);
            },
            function(){
                $(this).find('.captiona').fadeOut(250);
            }
        );
  });

</script>




</body>
</html>

score 0 · Accepted Answer

根据您的要求，这是解决悬停问题的方法。请记住，我不知道这个 Masonry 库，所以我写的任何关于它的内容都可能不正确；你必须告诉我它是否正确。

首先，我相信如果将所有内容都放在同一个<script>标签中，而不是单独的脚本块，事情会变得更容易。

正如我之前所说，问题在于您的悬停功能（.hover）仅在 DOM 首次加载时应用，这显然不会影响之后加载的任何内容。根据您发布的代码，我假设您还需要.hover从$newElems.imagesLoaded. 可能最简单的方法是将.hover内容提取到它自己的函数中并将其放置在脚本块的顶部附近，如下所示：

// this function takes a jQuery object
var handleOnHover = function($elements){
    $elements.hover(
        function(){
            $(this).find('.caption').fadeOut(250);
        },
        function(){
            $(this).find('.caption').fadeIn(250);
        }
    );
}

您可以从准备就绪函数和imagesLoaded函数调用它，如下所示：

$(document).ready(function(){
    var $container = $('.container');
    handleOnHover($container); // <-- Here
});

container.infinitescroll({
    navSelector  : '.pagination',    
    nextSelector : '.pagination a',
    itemSelector : '.container',
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
    }
},
function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });

    $newElems.imagesLoaded(function(){
        handleOnOver($newElems); <-- here again

        $newElems.animate({ opacity: 1 });
        container.masonry( 'appended', $newElems, true ); 
    });
});

jquery - 在 Tumblr 中，如何消除砌体中的垂直间隙并使其无限滚动？

1 回答 1

Related

Reference