如何用汤博乐实现Packey库

我在Packey网站上学习了"入门"教程，但我仍然无法让我的tumblr照片帖子与库一起使用。我不确定我需要更改或添加什么，因为Packey教程非常模糊。

   <!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>

有几件事。

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

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

2） Packey的错误很奇怪，我不完全确定是什么原因造成的。但通过在控制台上对接这个简单的JS，我能够让它运行：

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

请确保此代码出现在文档的末尾，即关闭</body>之前。

3）由于你的帖子是图片，你需要确保你为它们提供了宽度和高度，这样Packey才能知道每个帖子有多大。不幸的是，由于你没有使用标准的汤博乐宽度，你需要包括imagesLoaded插件，并将你的代码放在它的回调中。

使用jQuery的简单方法：

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

如果你使用标准的汤博乐大小（比如250px），你可以简单地为每个图像添加一个宽度和高度属性，而不需要担心使用imagesLoaded，比如这样：

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

相关内容

最新更新

热门标签：