Question

我有一个图片网格，使用Masonry进行管理，使其看起来像＃34; Pinterest＆＃34;比如，你可以点击任何图片，PhotoSwipe将以图库的形式显示图片。我的问题是，在PhotoSwipe图库关闭后（使用＆＃34; x＆＃34;按钮），砌体不会加载，因此图片网格的创建失败。

这是我的js

var openGallery = function() {
   $('.picture').each( function() {
      var $pic     = $(this),
        getItems = function() {
          var items = [];
             $pic.find('a').each(function() {
               var $href   = $(this).attr('href'),
                   $size   = $(this).data('size').split('x'),
                   $width  = $size[0],
                   $height = $size[1];

              var item = {
                  src : $href,
                  w   : $width,
                  h   : $height
              }

              items.push(item);
          });
          return items;
      }

  var items = getItems();
  var $pswp = $('.pswp')[0];
  $pic.on('click', 'figure', function(event) {
  event.preventDefault();
  var $index = $( "figure" ).index( this );
  var options = {
      index: $index,
      bgOpacity: 0.7,
      showHideOpacity: true
  }

  var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
  lightBox.init();
   });
 });
};



 $(window).load(function() {
    var container = document.querySelector('#masonry');
    var msnry = new Masonry( container, {
     columnWidth: '.item',
     itemSelector: '.item'
    });
  });

这是我的HTML

<div id='masonry>
  <div class="picture" itemscope>
    <figure itemprop="associatedMedia" >
       <a href="/assets/3.jpg" itemprop="contentUrl"  data-size="1000x592">
        <img src="/assets/3" onclick="openGallery();" id="hey" class="one-third item" itemprop="thumbnail" alt="Beach">
        </a>
    </figure>
  </div>
</div>

我将不胜感激任何帮助！谢谢

PhotoSwipe画廊关闭后，砌体不会加载

0 个答案: