tumblr主题中的帖子未按砌体顺序排列

时间:2019-01-12 19:42:04

标签: javascript jquery tumblr jquery-masonry masonry

我的Tumblr主题之前运行良好,但是在tumblr强制我们将URL从http更改为https之后,因此我在主题资产中上传了相同的masonry.js文件。我的javascript文件从

更改了

<script type="text/javascript" src="http://.../masonry.js"></script>

<script type="text/javascript" src="https://.../masonry.js"></script>

但是现在帖子的排列没有像以前那样完美。我将附加主题的HTML,CSS和javascript代码。请帮忙。预先谢谢你。

CSS

#content {
    {block:IndexPage}
    width:66%;
    {/block:IndexPage}
    
     {block:PermalinkPage}
    width: 55%;
    {/block:PermalinkPage}
    top:170px;
    
    {block:IndexPage}
    left: 1%;
    {/block:IndexPage}
    {block:PermalinkPage}
    left: 10%;
    {/block:PermalinkPage}
    
    float: left; 
    position: absolute;
}

.entry {
    float:center;
    {block:indexpage}
    width: 43%;
    overflow:hidden;
    {/block:indexpage}
    margin: 2%; 
    {block:permalinkpage}
    width: 500px;
    {/block:permalinkpage}
    padding: 10px;
    background: {color:box};
    display: inline-block;
    position: relative;
    z-index:4;
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
       border-radius:3px;
} 
.entry img {
    display: block;
    width:auto;
    max-width: 100%;
    height:auto;
}

HTML

<div class="autopagerize_page_element">
{block:Posts}
<div class="entry">
...POSTS...
...POSTS...
...POSTS...
</div>
{/block:Posts}
</div>

JAVASCRIPT

<script type="text/javascript" src="https://static.tumblr.com/82upcij/kv2pl8cna/masonry1.js"></script>

<script type="text/javascript">
$(window).load(function () {
$(".autopagerize_page_element").masonry({ itemSelector: ".entry" });
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "Loading",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

0 个答案:

没有答案