在砌体组中创建锚链接

时间:2011-09-26 16:38:14

标签: jquery hyperlink anchor jquery-masonry

我对砌体有一个独特的问题,我会喜欢一些帮助。因为我通过Typekit从外部加载字体,所以我必须在window.load而不是document.ready中包含Masonry代码(在Masonry加载之前必须加载字体,否则行长度不同,因此绝对定位搞砸了source)。我还需要直接链接到Masonry组中的部分(作为页面内的锚点)。组合这两件事的问题是,如果你使用window.load,那么当页面加载时锚点就不存在,所以链接通向砌体部分的顶部而不是带有链接的砌体部分中的特定部分。有关如何纠正此问题的任何想法?最简单的解决方案是让代码工作而不必诉诸于window.load。不幸的是,我还没有找到替代方案。任何帮助都会很棒。

1 个答案:

答案 0 :(得分:1)

  1. 使用Typekit font event触发砌量已加载/未加载字体
  2. 抓住任何哈希值并使用$(window).load()
  3. 强制滚动到它们
    var $container;
    
    function triggerMasonry() {
      // don't proceed if doc not ready
      if ( !$container ) {
        return
      }
      $container.masonry({
        // options...
      });
    }
    
    $(function(){
      $container = $('#container');
      triggerMasonry();
    });
    
    // trigger masonry after fonts have loaded
    Typekit.load({
      active: triggerMasonry,
      inactive: triggerMasonry // triggered in Chrome
    });
    
    // catch any hashes and force scroll to them
    // resolves Masonry bug
    var $window = $(window);
    
    $window.load(function(){
      if ( window.location.hash ) {
        var destination = $( window.location.hash ).offset().top;
        $window.scrollTop( destination );
      }
    });