1

我遵循了 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>
4

1 回答 1

2

几件事。

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 尺寸（比如 250 像素），你可以简单地为每个图像添加宽度和高度属性，而无需担心使用 imagesLoaded，如下所示：

<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />
于 2013-08-24T01:46:29.480 回答