1. дома
  2. Вопрос и ответ
  3. Tumblr JS/Jquery Infinite Scroll/Masonry Glitch

Tumblr JS/Jquery Infinite Scroll/Masonry Glitch

2014-01-27 1 views
1

Я новичок в JS/JQuery и кирпичной кладке, так что это, наверное, какая-то глупая ошибка, но я много искал ответы, и я полностью из идей.Tumblr JS/Jquery Infinite Scroll/Masonry Glitch

Проблема заключается в перекрытии сообщений/div. enter image description here http://folkherofilms.tumblr.com/tagged/thrilljockey/chrono

Вот полный код темы:

<html> 
    <head> 
     <title>{Title}</title> 
     <link rel="shortcut icon" href="{Favicon}"> 
     <link rel="alternate" type="application/rss+xml" href="{RSS}"> 
     {block:Description} 
      <meta name="description" content="{MetaDescription}" /> 
     {/block:Description} 

<script src="http://static.tumblr.com/cbgnuxd/KqQmy0t7l/jquery-1.7.1.min.js"></script> 
<script src="http://static.tumblr.com/cbgnuxd/LE0my0t7x/jquery.masonry.min.js"></script> 
<script src="http://static.tumblr.com/cbgnuxd/PW6my0t86/masonry.pkgd.js"></script> 
<script type="text/javascript" src="http://static.tumblr.com/cbgnuxd/He2myzqh0/lazyyt.js"></script> 

<!-- SHARERS --> 
<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'3a7d8263-9ce0-4500-9413-f40167dad735'});</script> 

<!-- OTHER CRAP SCRIPT --> 

<script> 

$(function(){ 

// YT LAZY LOAD 
$('.js-lazyYT').lazyYT(); 

// INDEX PAGE 
if (document.location.href == "http://folkherofilms.tumblr.com/") { 
    window.location.href = "http://folkherofilms.tumblr.com/index"; 
} 

if (document.location.href == "http://folkherofilms.tumblr.com/index") { 
    $('body').addClass('static'); 
    $('.item').addClass('autoheight'); 
} 

// CASE STUDY PAGES 
if (document.location.href.indexOf('tagged/') > -1) { 
    $('#sidebar').fadeIn('slow'); 
} 

// ABOUT PAGE 

if (document.location.href == "http://folkherofilms.tumblr.com/about") { 
    $('body').addClass('static'); 
    $('.item img').css('width','auto'); 
    $('.item').addClass('autoheight'); 
} 

// TEMPORARY PORTFOLIO PAGE 

if (document.location.href == "http://folkherofilms.tumblr.com/portfolio") { 
    $('body').addClass('static'); 
    $('.item').addClass('autoheight'); 
} 

// PORTFOLIO PAGE 
if (document.location.href == "http://folkherofilms.tumblr.com/tagged/portfolio") { 
    $('#sidebar, .sharers').css('display','none'); 
    $('#maincontainer, #headercontainer').css('width','1040px'); 
    $('#maincontainer').css('top','190px'); 
    $('#container').css('margin-left','0px'); 
    $('.item').removeClass('m l autoheight'); 
    $('.item').addClass('s'); 
} 

// FIELD NOTES POSTS 
if ($('.item.fieldnotes').length) { 
    $('body').addClass('static'); 
    $('#disqus_things, .sharers').show(); 
    $('.item').addClass('autoheight'); 

} 

// FIELD NOTES PAGE 
if (document.location.href == "http://folkherofilms.tumblr.com/tagged/fieldnotes") { 
    $('body').addClass('static'); 
    $('.item').removeClass('m s'); 
    $('.item img').css('width','auto'); 
    $('#disqus_things, .sharers').hide(); 
} 

// CONTACT PAGE 
if (document.location.href == "http://folkherofilms.tumblr.com/contact") { 
    $('body').addClass('static'); 
} 

// DEFAULT SIZE POSTS 
$('.item:not(.m, .l)').addClass('s'); 

// 404 PAGE 
if ($('p:contains("The URL you requested could not be found.")').length > 0) { 
    $('.item, .sharers').hide(); 
    $('#notfound').show(); 
} 

}); 
</script> 

<!-- META --> 

<meta name="image:Background" content=""/> 
<meta name="image:Logo" content=""/> 
<meta name="image:Header Background" content=""/> 
<meta name="color:Text Color" content="#666"/> 
<meta name="color:Link Underline" content="#5c7ea5"/> 
<meta name="text:Disqus Shortname" content="" /> 

<!-- CSS --> 

<style> 

html, body {height:100%} 

#tumblr_controls, #tumblr_controls iframe {display:none!important} 

body { 
margin:0; 
background-color:#ccc; 
background-image:url('{image:Background}'); 
font-family:Pt Sans, Helvetica, sans-serif; 
font-size:14px; 
-webkit-font-smoothing: antialiased; 
color: {Color:Text Color}; 
overflow-x:hidden; 
} 

.hide {display:none!important} 

#sitecredit { 
position:fixed; 
bottom:6px; 
right:10px; 
} 

#sitecredit img {width:21px;opacity:0.5} 
#sitecredit img:hover {opacity:0.9} 

h3 {font-size:10px} 

#disqus_things {display:none} 
#disqus_things .post {width:100%} 

#maincontainer { 
visibility:hidden; 
position: relative; 
top: 200px; 
width: 1135px; 
height:100%; /*FOR SAFARI */ 
margin: 0 auto; 
padding-bottom:100px; 
} 

#infscr-loading {opacity:0} 

/* STATIC PAGES */ 

.statiC#sidebar {display:none!important} 
.statiC#maincontainer, .statiC#headercontainer, .statiC#container {width:910px} 
.statiC#maincontainer {top:190px} 
.statiC#container {margin-left:0px} 
.static .item {width:850px;padding:10px 20px;position:relative!important;} 
.static .sharers {display:none; margin:30px;} 
.static .big {width:830px!important;height:467px!important} 

/* HEADER */ 

    #header { 
    position:fixed; 
    z-index:50;$() 
    display:block; 
    width:100%; 
    height:130px; 
    background-image:url('{image:Header Background}'); 
    background-color:#222; 
    padding:20px 0; 
    font-size:10px; 
    } 

    #headercontainer { 
    position:relative; 
    margin:0 auto; 
    display:block!important; 
    width:910px; 
    transition-duration:0.5s; 
    -webkit-transition-duration:0.5s; 
    -moz-transition-duration:0.5s; 
    -o-transition-duration:0.5s; 
    } 

    #header, #header a { 
    color:#fff; 
    letter-spacing:1px; 
    text-decoration:none; 
    } 

    #headerlinks { 
    position:relative; 
    left:170x; 
    } 

    #header a { 
    font-size:13px; 
    } 

    #header div, #header a {display:inline-block} 

    #logo { 
    height:100%; 
    margin: 0 20px 0 30px; 
    } 

/* SIDEBAR */ 

    #sidebar { 
    position: absolute; 
    display: none; 
    top: 0; 
    width: 100px; 
    text-align: center; 
    margin:0 10px; 
    } 

    #sidebar h1 { 
    font-size:12px; 
    font-weight:normal; 
    display:block; 
    border-bottom:1px solid black; 
    } 

    #sidebar a { 
    display:block; 
    color: #5c5959; 
    padding-bottom: 2px; 
    text-decoration: none; 
    text-transform: capitalize; 
    padding:3px; 
    width:91px; 
    margin:10px 0; 
    background:#fff; 
    text-align:center; 
    font-size:11px; 
    } 

/* POSTS */ 


    .item a { 
    color: {Color:Text Color}; 
    color: #666; 
    font-weight: bold; 
    text-decoration: none; 
    } 

    .item a:hover {color:{Color:Link Underline}} 

    .read_more {text-transform:uppercase} 

    #notfound { 
    display:none; 
    margin: 10px 0 0 129px; 
    font-style: italic; 
    font-size: 20px; 
    text-align: center; 
    letter-spacing: 1px; 
    width: 500px; 
    } 
    .notfound-404 { 
    font-size: 300px; 
    font-weight: bold; 
    margin: 0 0 10px; 
    font-family: arial; 
    font-style: normal; 
    display: block; 
    line-height: 220px; 
    letter-spacing: -9px; 
    text-align: left; 
    } 

    #container { 
    z-index: 0; 
    display: inline-block; 
    margin-left: 115px; 
    width: 1200px; 
    } 

    .item { 
    overflow:hidden; 
    background-color:#fff; 
    margin:10px; 
    } 

    .item img {display:block;min-width:100%;height:100%;width:auto;} 
    .item p img {max-width:100%;height:auto} 

    .item iframe {width:100%;height:100%;} 

    div.js-lazyYT img {width:auto!important;min-width:0px;height:auto;} 
    .lazyYT-title {display:none} 

    p {margin:5px} 

    .s { 
    width:240px; 
    height:200px; 
    } 
    .s .media {height:173px} 

    .m { 
    width: 500px; 
    height:420px; 
    } 
    .m .media {height:392px} 

    .text {padding:10px 0} 
    .s.text, .m.text {overflow-y:auto} 
    .s.text {height:180px} 
    .m.text {height:400px} 

    .l {width:1020px} 
    .l.video iframe {height: 574px} 

    .l img, .autoheight, .autoheight .media, .autoheight .media img { 
    height:auto!important; 
    min-height:0px; 
    } 

    .autoheight.nocaption .media { 
    width:100%; 
    height:auto; 
    } 

    .autoheight.nocaption .media img { 
    width: 100%; 
    margin: -5px 0; 
    } 

    .nocaption .media {height:100%} 

    .nocaption img { 
    min-height: 100%; 
    min-width: 100%; 
    width: 100%; 
    height:auto; 
    } 

    /*.nocaption.s img, .nocaption.m img {min-height: 100%}*/ 

    .nocaption iframe { 
    height: 106%; 
    margin-top: -3%; 
    display:block; 
    } 

    h1 {font-size:14px} 

    .media { 
    position:relative; 
    width:100%; 
    overflow:hidden; 
    } 

    .caption { 
    position:relative; 
    display:block; 
    padding:0 10px; 
    } 

    .audio .media {height:100%} 

    .audio .player-wrapper { 
    display: inline-block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -20px!important; 
    width: 40px; 
    height: 40px; 
    overflow: hidden; 
    } 

    .audio_player { 
    display: block; 
    width: 250px; 
    height: 50px; 
    margin:-5px!important; 
    } 

    .audio_player iframe {position:relative} 

    .player-wrapper {z-index:70} 

    .audioinfo { 
    opacity:0; 
    position: absolute; 
    z-index: 50; 
    top: 0; 
    left: 0; 
    padding: 15px 0; 
    text-align: center; 
    font-weight: bold; 
    width: 100%; 
    height: 100%; 
    color: whitesmoke; 
    background: black; 
    } 

    .audio:hover .audioinfo {opacity:1} 

/* SHARES */ 

.sharers { 
width: 88px; 
border-top: 1px dashed black; 
padding-top: 10px; 
padding-bottom:50px; 
text-align: center; 
margin:30px 0 0 120px; 
} 

.sharers span { 
width: 20px!important; 
height: 20px!important; 
background-size: 20px; 
margin: 2px; 
} 

.stButton .stLarge:hover { 
opacity: 1!important; 
background-position: 0!important; 
cursor:pointer; 
padding-right:0px; 
} 

/* LIKE REBLOG */ 

.likereblog {display:none} 
.like .likereblog {display:block} 

.likereblog {padding:0px 10px 5px} 
.likereblog * { 
display:inline-block!important; 
border-bottom:none!important; 
width:15px!important; 
height:15px!important; 
} 
.likereblog a:hover {background-color:transparent} 
.likereblog svg {margin-left:10px; fill:#000} 

.audio .likereblog, .nocaption .likereblog {position: absolute;z-index: 9999;} 
.nocaption .likereblog, .audio .likereblog {bottom:0px} 

.nocaption .likereblog svg {fill:#fff} 
.nocaption .likereblog iframe {-webkit-filter:invert(1)} 

/* PAGES */ 

.item.fieldnotes p img, .item.fieldnotes p iframe { 
    width:auto!important; 
    display:block; 
    margin:0 auto; 
} 

</style>  

    </head> 

<!-- BODY --> 

<body> 

<!-- MASONRY SCRIPT --> 
<script> 

$(function(){ 

    // IF NOT FIELD NOTES PAGE 
    if (!$('.item').hasClass('fieldnotes')) { 

     // UNWRAP TITLE LINKS 
     $('.item .title h1').unwrap(); 

     // MASONRY 
     var $container = $('#container'); 

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

    } 

}); 
</script> 

<!-- SITE CREDIT --> 
<div id="sitecredit"><a href="http://dinakelbermanwebdesign.com" target="blank"> 
<img src="http://dinakelbermanwebdesign.com/credit.png"></a> 
</div> 


<!-- HEADER --> 
<div id="header"> 
    <div id="headercontainer"> 
    <span id="headerwrap"> 
    <a href="http://folkherofilms.tumblr.com/index"><img id="logo" src="{image:Logo}"></a> 

    <div id="headerlinks"> 
    <a href="/about">Who We Are</a> &#9679; 
    <!--a href="/tagged/portfolio">Portfolio</a> &#9679;--> 
    <a href="/fieldnotes">Field Notes</a> &#9679; 
    <a href="/contact">Contact</a> &#9679; 
    <a href="http://folkherofilms.tumblr.com/index">Home</a> 
    </div> 
<!---------------------------------------------------------------------> 

    </span> 
    </div> 
</div> 


<div id="maincontainer"> 

<!-- SIDEBAR --> 
<div id="sidebar"> 
<h1>MORE PROJECTS</h1> 
{block:HasPages} 
{block:Pages} 
<a href="{URL}">{Label}</a> 
{/block:Pages} 
{/block:HasPages}  

</div> 

<div id="notfound"><span class="notfound-404">404</span>Page not found, please try again!</div> 

<div id="container"> 

{block:Posts} 

<!-- TEXT --> 

{block:Text} 
<div class="item text {TagsAsClasses}"> 

    <div class="caption"> 
    {block:Title} 
    <a href="{Permalink}" class="title"><h1>{Title}</h1></a> 
    {/block:Title} 
    {Body} 

    <div class="hide"> 
    {block:ContentSource}{SourceURL}{/block:ContentSource} 
    </div> 

    </div> 

<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div> 
</div> 
{/block:Text} 

<!-- PHOTO --> 

{block:Photo} 
<div class="item {TagsAsClasses} photo"> 

    <div class="media"><img src="{PhotoURL-500}"></div> 

    {block:Caption} 
    <div class="caption entry"> 
    {Caption} 
    </div> 
    {/block:Caption} 


<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div> 
</div> 

    <div class="hide"> 
    {block:ContentSource}{SourceURL}{/block:ContentSource} 
    </div> 
{/block:Photo} 


<!-- PANORAMA -->              

{block:Panorama} 
    <li class="panorama"> 
     {LinkOpenTag} 
      <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/> 
     {LinkCloseTag}{block:Caption} 
      <div class="caption">{Caption}</div> 
     {/block:Caption} 


<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div> 
    </li> 

     <div class="hide"> 
    {block:ContentSource}{SourceURL}{/block:ContentSource} 
    </div> 
{/block:Panorama} 


<!-- PHOTOSET --> 

{block:Photoset} 
<div class="item {TagsAsClasses}"> 
<div class="media-photoset"> 
<div class="lightbox photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}"> 
{block:Photos} 

<div class="photo-data"> 
    <div class="pxu-photo"> 
    <a class="tumblr-box" rel="post is-item-{PostID}" href="{PhotoURL-HighRes}"> 
      <img alt="{PhotoAlt}" src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}> 
    </a> 
    </div> 
    <div class="icons"> 
    <span class="info"> 
     Info 
    </span> 
    </div> 
</div> 
{/block:Photos} 
</div> 
</div> 
{block:Caption} 
<div class="background unrounded"> 
<div class="entry caption"> 
{Caption} 

</div> 
</div> 
{/block:Caption} 
{block:IfTags} 
{block:HasTags} 
<div class="background unrounded tags clearfix"> 
{block:Tags} 
    <a href="{TagURL}"> 
     <div class="tag">{Tag}</div> 
    </a> 
{/block:Tags} 
</div> 
{/block:HasTags} 
{/block:IfTags} 
<div class="meta"> 
<div class="part"> 
<a href="{Permalink}" title="Permalink"> 
{TimeAgo} 
</a> 
</div> 
<div class="part heart"> 
<a href="{Permalink}" title="Permalink"> 
<i class="icon-heart"></i> 
<div class="text heart"><div class="note-counter">{NoteCount}</div></div> 
</a> 
</div> 
</div> 
</div> 
    <div class="hide"> 
    {block:ContentSource}{SourceURL}{/block:ContentSource} 
    </div> 
{/block:Photoset} 


<!-- VIDEO --> 

{block:Video} 
<div class="item video {TagsAsClasses}"> 

<div class="media">{VideoEmbed-700}</div> 

{block:Caption} 
<div class="caption entry"> 
{Caption} 
</div> 
{/block:Caption} 

<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div> 

</div> 
    <div class="hide"> 
    {block:ContentSource}{SourceURL}{/block:ContentSource} 
    </div> 
{/block:Video} 


<!-- AUDIO --> 

{block:Audio} 
<div class="item audio {TagsAsClasses}"> 

<div class="player"> 
    {block:AudioPlayer} 
    {block:AlbumArt} 
     <img src="{AlbumArtURL}" class="albumart"> 
     <div class="player-wrapper">{AudioPlayerBlack}</div> 
    {/block:AlbumArt} 
    {/block:AudioPlayer} 

    {block:AudioEmbed} 
    <div class="background"> 
     <div class="audioembed">{AudioEmbed-500}</div> 
    </div> 
    {/block:AudioEmbed} 
</div> 

{block:Artist} 
<div class="audioinfo"> 
{Artist}<br> 
{block:TrackName}{TrackName}{/block:TrackName} 
</div> 
{/block:Artist} 



<div> 
    {block:Caption} 
    <div class="caption entry">{Caption}</div> 
    {/block:Caption} 
</div> 


<div class="likereblog">{LikeButton color="black"}{ReblogButton}</div> 

</div> 
    <div class="hide"> 
    {block:ContentSource}{SourceURL}{/block:ContentSource} 
    </div> 
{/block:Audio} 

{/block:Posts} 
</div> 

<div class="sharers"> 
<span st_url='{Permalink}' st_title='{Title}' class='st_twitter' displayText=''></span><span st_url='{Permalink}' st_title='{Title}' class='st_facebook' displayText=''></span><span st_url='{Permalink}' st_title='{Title}' class='st_email' displayText=''></span> 
</div> 

<!-- DISQUS --> 
<div id="disqus_things"> 
    {block:IfDisqusShortname} 

    <div class="post type-comments m {block:HighRes}l{/block:HighRes}"> 
    <div class="background fully-rounded"> 
    <h3 class="title"> 
    Comments 
    </h3> 
    <div class="entry comments"> 
    <script type="text/javascript"> 
    var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}"; 
    </script> 
    <div id="disqus_thread"></div> 
    <script type="text/javascript"> 
    var disqus_shortname = '{text:Disqus shortname}'; 

    function load_disqus() 
    { 
    (function() { 
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);             
    })(); 
    } 


    load_disqus(function() {}); 

    </script> 
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 
    <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> 

    </div> 

    {/block:IfDisqusShortname}     
</div> 

<!-- PAGINATION FOR INFINITE SCROLL --> 
    <div class="pagination"> 
    {block:Pagination} 
    {block:NextPage} 
    <a href="{NextPage}">NEXT</a> 
    {/block:NextPage} 
    {/block:Pagination} 
    </div>  

</div> 


<!-- IMAGE LOAD JS --> 
<script type="text/javascript" src="http://static.tumblr.com/cbgnuxd/l2rmz5u6v/imagesloaded.js"></script> 

<!-- INFINITE SCROLL --> 
<script type="text/javascript" src="http://static.tumblr.com/cbgnuxd/saomz5tvi/jquery.infinitescroll.js"></script> 

<!-- INFINITE SCROLL --> 
<script type="text/javascript"> 
(function() { 
    var $tumblelog = $('#container'); 
    $tumblelog.infinitescroll({ 
     navSelector: ".pagination", 
     nextSelector: ".pagination a:last-child", 
     itemSelector: ".item", 

    loading: { 
    finished: undefined, 
    finishedMsg: "", 
    img: "", 
    msg: null, 
    loadingText: "<em></em>", 
    }, 

    }, 

    function (newElements) { 
     var $newElems = $(newElements).css({ 
      opacity: 0 
     }); 
     $newElems.imagesLoaded(function() { 
      $newElems.animate({ 
       opacity: 1 
      }); 

      $('.item:not(:has(.caption))').addClass('nocaption'); 

      // IF NOT FIELD NOTES PAGE 
      if (!$('.item').hasClass('fieldnotes')) { 
       // UNWRAP TITLE LINKS 
       $('.item .title h1').unwrap(); 
      } 

      // PORTFOLIO PAGE 
      if (document.location.href == "http://folkherofilms.tumblr.com/tagged/portfolio") { 
       $('#sidebar, .sharers').css('display','none'); 
       $('#maincontainer, #headercontainer').css('width','1040px'); 
       $('#maincontainer').css('top','190px'); 
       $('#container').css('margin-left','0px'); 
       $('.item').removeClass('m l autoheight'); 
       $('.item').addClass('s'); 
      } 

      // FIELD NOTES POSTS 
      if ($('.item.fieldnotes').length) { 
       $('body').addClass('static'); 
       $('#disqus_things, .sharers').show(); 
       $('.item').addClass('autoheight'); 

      } 

      // FIELD NOTES PAGE 
      if (document.location.href == "http://folkherofilms.tumblr.com/tagged/fieldnotes") { 
       $('body').addClass('static'); 
       $('.item').removeClass('m s'); 
       $('.item img').css('width','auto'); 
       $('#disqus_things, .sharers').hide(); 
      } 

      $tumblelog.masonry('appended', $newElems); 
     }); 
    }); 
    $tumblelog.imagesLoaded(function() { 
     $tumblelog.masonry({ 
      columnWidth: function (containerWidth) { 
       return containerWidth/100; 
      } 
     }); 
    }); 

})(); 

// NOCAPTION POSTS 
$('.item:not(:has(.caption))').addClass('nocaption'); 

</script> 

</body> 

<script> 
$(function(){ 
    // SITE LOADING 
$(window).load(function() { 
    $("#maincontainer").css('visibility','visible'); 
}); 

}) 
</script> 

</html>

Я пробовал различные решения и глюк продолжает получать «фиксированный», но затем возвращается. Может ли Tumblr каким-то образом возиться с JS?

источник

2014-01-27 milpool

+0

Может быть, говорит нам, что вы пытались бы быть полезным. Я действительно не думаю, что кто-то хочет пройти весь этот код. И, кстати, он не отформатирован должным образом. – Idris

+0

Сложно сказать, но мое первое предположение было бы загружено изображениями. Вы вызываете его в трех местах, когда на самом деле его нужно вызвать один раз для изображений, уже находящихся в DOM, и снова для изображений добавить в DOM через бесконечный прокрутки. Позже это правильно, поэтому я бы дважды проверял первый. Также вы можете подтвердить, в какой момент это происходит? – mikedidthis

+0

Извините за огромный код, я новичок на этом сайте, не хотел оставлять без внимания то, что может быть актуальным. , , спасибо за ваши загруженные изображения идеи, я проверю это! не уверен, когда это происходит, потому что это происходит так непоследовательно. – milpool

ответ

0

проблема заключалась в том, что я не включил варианты кладки после бесконечного прокрутки. то есть моя кладка на вершине была такова:

// MASONRY 
     var $container = $('#container'); 

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

и после бесконечной прокрутки ему необходимо соответствовать:

$tumblelog.imagesLoaded(function() { 
    $tumblelog.masonry({ 
      columnWidth: 1, 
      isOriginTop: true, 
      itemSelector : '.item' 
    }); 
});

источник

2014-02-03 21:54:27 milpool

 Смежные вопросы

  • Нет связанных вопросов^_^