Question

显然，我的图像并没有堆叠在一起。它们都是水平的直线。不确定有什么问题。我想让图像在一个合适的Pinterest-like / Masonry网格中叠加在一起。

这是我在索引文件中使用的短代码：

  echo do_shortcode('[nggallery id="1"]');

这是我的Masonry gallery模板文件中的代码：

  <?php
  /**
  Template Page for the gallery overview
  Follow variables are useable :
  $gallery : Contain all about the gallery
   $images : Contain all images, path, title
   $pagination : Contain the pagination content
  You can check the content when you insert the tag <?php var_dump($variable) ?>
   If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
  **/
  ?>
   <script src="/wp-includes/js/jquery/jquery.masonry.min.js" type="text/javascript">      </script>
   <script>
  $(function(){

  var $container = $('#container');

  $container.imagesLoaded( function(){
    $container.masonry({
itemSelector : '.box'
    });
  });

  });
   </script>
  <style>
  .brick {
  display: block;
   margin: 0px 10px 15px 10px;
   float:left;
  /* width:250px; */
   height: auto;
  }
  </style>
  <script>
   jQuery( document ).ready( function( $ ) {
   $('#wall').masonry({
   // options
   itemSelector : '.brick',
  isAnimated: true,
   animationOptions: {
   duration: 500,
   easing: 'linear',
   queue: false}
   });
  </script>
  <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
  <div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
  <div id="wall">
  <!-- Thumbnails -->
<?php $i = 0; ?>
  <?php foreach ( $images as $image ) : ?>
  <div class="brick">
  <a class="thickbox" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
  <?php if ( !$image->hidden ) { ?>
  <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
  <?php } ?>
  </a>
  </div>
  <?php if ( $image->hidden ) continue; ?>
     <?php if ($gallery->columns > 0): ?>
    <?php if ((($i + 1) % $gallery->columns) == 0 ): ?>
        <br style="clear: both" />
    <?php endif; ?>
<?php endif; ?>
<?php $i++; ?>
  <?php endforeach; ?>
  <?php echo $pagination ?>
  </div>
  </div>
  <?php endif; ?>

这就是我的画廊在实际页面上的样子：

http://steppic.com/original/896e07bdf2f759709b9ccc5f9eea9e28.png

Answer 1

我不完全确定，因为我不知道您是否提供了完整的CSS，但如果您只删除margin: 0px 10px 15px 10px;类brick，它可能会有效。<登记/> 在砌体示例页面上，我刚刚通过将此边距添加到与您的类item对应的类brick来调整示例，结果与您的屏幕截图类似： Masonry Example

此外，您看起来两次打砖石 - 一次是.container - $container.masonry({...，第二次是#wall - $('#wall').masonry({... 当您按照建议删除边距时，您可以检查它是否正常工作，也可能只调用一次砌砖。

更新：您可以尝试的下一步调整是从班级height: auto;中移除brick。我已经通过添加高度调整了一个砌体示例：自动添加到课程项目Masonry with height: auto，正如您将注意到的，当删除高度设置时，有一些问题不存在：Masonry without height: auto

对于砖石参考：http://masonry.desandro.com/options.html

Answer 2

您使用不同的参数两次调用砌体。

首先，你的容器是＆＃34;＃container＆＃34;并且您的商品是＆＃34; .box＆＃34;：

var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box'
});

第二，你的容器是＆＃34;＃wall＆＃34;而且你的物品是＆＃34;。布里克＆＃34;，你遗漏了＆＃34;}）;＆＃34;在你的（文件）.ready

的最后

jQuery( document ).ready( function( $ ) {
 $('#wall').masonry({
 // options
 itemSelector : '.brick',
isAnimated: true,
 animationOptions: {
 duration: 500,
 easing: 'linear',
 queue: false}
 });
 }); //this was missing

选择正确的容器和物品，它应该可以正常工作

图像没有堆积在砌体模板中？

2 个答案: