个人中心
gpt4 book ai didi

javascript - 如何使用 Tumblr 实现 Packery 库

转载 作者：行者123 更新时间：2023-11-28 13:13:27 27 4
gpt4 key购买 nike

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

最佳答案

几件事。

1) 你的 #posts container 是 float 的，因此宽度与其中的内容一样宽。即使 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}" />

关于javascript - 如何使用 Tumblr 实现 Packery 库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18384052/

27 4 0
文章推荐： javascript - THREE.js 使用多个 BoxGeometries 时保持单一颜色。一切都是不变的
文章推荐： xcode - 我应该将 UIIMageViews 直接放在 Controller 的 View 中吗？
文章推荐： javascript - 如何更改类onclick？
文章推荐： android - 为 .css 文件利用 WebView 和 "file:///android_res/"的资源系统
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com