Jquery 在Tumblr中，如何消除砌体中的垂直间隙并使无限滚动工作？？_Jquery

Jquery 在Tumblr中，如何消除砌体中的垂直间隙并使无限滚动工作？？

jquery

Jquery 在Tumblr中，如何消除砌体中的垂直间隙并使无限滚动工作？？,jquery,Jquery,这是我第一次使用stackoverflow。在过去的几天里，下面的问题让我发疯。我真的希望能从这里找到一些帮助我目前正在创建自己的Tumblr主题。我用的是砖石，今天我用的是无限卷轴。但我遇到了以下问题我的Tumblr站点是我使用的chrome 图像之间有一个垂直间隙，图像的一小部分放在下一个图像的顶部。我没有设置边距和填充。然而，我给每个容器的宽度百分比（25%）。。。我真的很想去掉空白，以一种准确的方式排列它们当我向下滚动到无限滚动开始时，显示的内容。如您所见，我在每个容器上添加了悬停

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

我目前正在创建自己的Tumblr主题。我用的是砖石，今天我用的是无限卷轴。但我遇到了以下问题

我的Tumblr站点是我使用的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>


{block:Description}{/block:Description}
{block:TagPage}{Tag}-{/block:TagPage}{block:SearchPage}{lang:SearchQuery的搜索结果}-{/block:SearchPage}{block:PostSummary}{PostSummary}-{/block:PostSummary}{Title}
身体{
背景色：白色；
颜色：黑色；
字体系列：“arial”；
字号：1em；
}
a{
颜色：蓝色；
文字装饰：无；
}
h1、h2、h3、h4、h5、h6{
字体大小：正常；
字母间距：0.1米；
文本转换：大写；
}
p{
颜色：黑色；
字号：1em；
}
保险商实验室{
列表样式：无；
边际：0px；
}
李{
显示：块；
左边距：0px；
}
img{
最大宽度：100%；
}
//布局//
#内容{
宽度：100%；
}
.集装箱{
宽度：25%；
浮动：左；
溢出：隐藏；
填充：0；
}
.标题{
位置：绝对位置；
排名：0；
左：0；
背景色：黑色；
不透明度：0.2；
宽度：100%；
身高：100%；
}
卡蒂奥纳先生{
显示：无；
位置：绝对位置；
排名：0；
左：0；
}
{block:Posts}



{LikeButton color=“black”}
{ReblogButton color=“black”}
{block:Caption}{Caption}{/block:Caption}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{block:ContentSource}
{/block:ContentSource}

{块：照片}
{LinkOpenTag}{LinkCloseTag}
{/block:Photo}
{/block:Posts}
{块：分页}
{block:PreviousPage}{/block:PreviousPage}
{block:NextPage}{/block:NextPage}
{/block:Pagination}
$（函数（）{
变量容器=$（“#内容”）；
container.imagesLoaded（函数（）{
容器砌体({
itemSelector:“.container”
});
});
集装箱卷({
导航选择器：'.pagination'，
下一个选择器：'.pagination a'，
itemSelector:“.container”，
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/6RMhx.gif'
}
},
函数（新元素）{
var$newElems=$（newElements）.css（{opacity:0}）；
$newElems.imagesLoaded（函数（）{
$newElems.animate（{opacity:1}）；
容器。砖石（‘附加’，$newElems，真）；
});
}
);
});
$（窗口）。加载（函数（）{
$（“#内容”）.砌体({
itemSelector:“.container”，
},
function（）{$（'#content'）.mashine（{appendedContent:$（this）}）；}
);
});
$（文档）.ready（函数（）{
$（'.container'）。悬停(
函数（）{
$（this.find（'.caption'）.fadeOut（250）；
},
函数（）{
$（this.find（'.caption'）.fadeIn（250）；
}
);
});
$（文档）.ready（函数（）{
$（'.container'）。悬停(
函数（）{
$（this.find（'.captiona'）.fadeIn（250）；
},
函数（）{
$（this.find（'.captiona'）.fadeOut（250）；
}
);
});

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

首先，我相信如果您将所有内容都放在相同的

标记中，而不是单独的脚本块中，会使事情变得更容易

正如我前面所说，问题在于您的悬停函数（

.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);
        }
    );
}

$(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 ); 
    });
});

您可以从on ready函数和

imagesLoaded

函数调用它，如下所示：

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

$(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 ); 
    });
});

$（文档）.ready（函数（）{
var$container=$（'.container'）；
扶手悬停（$container）；//我不知道，但在Chrome developer窗口中检查标记后，看起来空白问题是
标记本身的问题。它们似乎太低了3倍，这造成了这种差距。例如，第二行的蓝色标记应该是top:476px
，而不是top:479px
>另外，关于悬停问题，基本上我认为你需要重新应用.hover
，就像你在.ready
函数中所做的那样。我想你只需要将该位提取到一个单独的函数中，并从imagesLoaded
调用它。谢谢@Teeg，但是，我很遗憾地未能完成这项工作