Question

我在Packery网站上关注了“入门”教程，但我仍然无法让我的tumblr照片帖子与图书馆一起工作。我不确定我需要更改或添加什么，因为Packery教程很模糊。

   <!DOCTYPE html>
 <html>
 <head>
 <script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>

 <script>


   var postsContainer = document.querySelector('#posts');
   var pckry = new Packery( postsContainer, {
   //options

   itemSelector: '.container',
   gutter:5
    });

   pckry.bindResize(postsContainer);

   </script>

 <link href='http://fonts.googleapis.com/css?family=Monofett|Varela|Londrina+Shadow'   rel='stylesheet' type='text/css'>

 <!--  fonts

 font-family: 'Monofett', cursive;
 font-family: 'Varela', sans-serif;
 font-family: 'Londrina Shadow', cursive;
 -->

 <title>{Title}</title>
 <link rel="shortcut icon" href="{Favicon}">


   <!-- DEFAULT COLORS -->
    <meta name="color:Background" content="#eee"/>
    <meta name="color:Content Background" content="#fff"/>
    <meta name="color:Text" content="#000"/>

  <style type="text/css">

  *{margin:0px;
    padding:0px;}

  html{height:100%;}   

  body{
     background-color:{color:Background};
     margin:0px;
     height:100%;
   }



    #sideBar{
     background-color:{color:Content Background};
     width:150px;
     height:100%;  ;
     margin:auto 0;
     margin-right:20px;
     padding-left:10px;
     float:left;
    }

   h1{font-family: 'Monofett', cursive;;
   font-size:43px;
   margin-bottom:25px;
   color:black;}

   h2{ font-family: 'Varela', sans-serif;
    font-size:12px;
    margin-bottom:10px;}

   p{margin-bottom:10px;}  

   a:link, a:visited{font-family: 'Varela', sans-serif;
    font-size:.95em;
    text-decoration:none;
    color:black;
    -webkit-transition:margin-left 1s, margin-right 1s, color .5s;
    -webkit-timing-function:ease;}

   #arrow{color:black;
      font-family: 'Varela', sans-serif;
      fonr-size:.95em;
      -webkit-transition:color.5s;
      -wekit-timing-function:ease;}




    a:hover{color:white;
        margin-left:10px;
        margin-right:40px;} 




    nav{margin-left:0px}  





   #posts{

   float:left;
   list-style:none;

   }

    .postPhoto{

    float:left;

    margin:5px;

    }  

    #wrapper{
      height:100%;

      width:700px;
    }    

   .pagination{display:none;}

   </style>
   </head>

   <body>

   <div id="wrapper">

   <div id="sideBar">
   <h1>{Title}</h1>
   <nav>    
   <p> <a href ="">Music </a>  <span id="arrow"> >> </span>  </p>
   <p> <a href="">Code </a> <span id="arrow"> >> </span>  </p>
   <p> <a href="">Shop </a> <span id="arrow"> >> </span>  </p>
   <p> <a href="">About </a> <span id="arrow"> >> </span>  </p>
   </nav>       
   </div>


   <div id="posts"> <!--content -->
       {block:Posts}

        <div class="container">    
            {block:Photo}
                <div class="postPhoto">
            <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="200px"/>

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

                {block:Video}
                <li class="post video">
                    {Video-250}

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

        </div><!--end container -->

        {/block:Posts}        
     </div>
    </div>         
    </body>
    </html>

Answer 1

一些事情。

1）您的#posts容器已浮动，因此仅与其中的内容一样宽。即使Packery 正在工作，它也只是将它们排成一列。你需要将它应用于宽度。如果你不关心IE8，你可以这样做：

#posts {
    width: -webkit-calc(100% - 180px);
    width:    -moz-calc(100% - 180px);
    width:         calc(100% - 180px);
}

2）Packery错误是奇怪的，我不完全确定导致它的原因。但是通过控制台对这个简单的JS进行操作，我就能让它运行起来：

var container = document.querySelector('#posts');
var pckry = new Packery( container, {
  // options
  itemSelector: '.container',
  gutter: 10
});

确保此代码位于文档末尾，即收盘</body>之前。

3）由于您的帖子是图片，因此您需要确保为他们提供宽度和高度，以便Packery知道每个帖子的大小。不幸的是，由于您没有使用标准的Tumblr宽度，因此您需要包含imagesLoaded插件并将代码放在其回调中。

使用jQuery的简单方法：

var container = document.querySelector('#posts');
container.imagesLoaded( function() {

    var pckry = new Packery( container, {
      // options
      itemSelector: '.container',
      gutter: 10
    });

});

如果您使用的是标准Tumblr尺寸（如250px），您只需为每个图像添加宽度和高度属性，而无需担心使用imagesLoaded，如下所示：

<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />

如何使用Tumblr实现Packery库

1 个答案: