Question

    <div id="popup-freewall" class="freewall">
        <g:each in="${similarImages}" var="other">
            <div class="grid-container">
                <div class="grid-tile">
                    <a class="overlay fancybox" href="/more/${other.id}">
                   <img src="${other.referralImage}" width="100%" />
                    </a>

                </div>

                <div class="info">
                    <p>${other.description}</p>
                </div><!--end detail-container-->
            </div>
        </g:each>
    </div>


<script type="text/javascript">
jQuery( document ).ready(function($) {
  // imagesLoaded('#popup-freewall', function(){
  var wall = new freewall("#popup-freewall");

  var $imgs = $('.grid-tile img').length;

  $imgs.on('load', function(){
    -- $imgs;
    if(!$imgs){
     $imgs.show();
      wall.fitWidth();
  }
  }).filter(function(){
    return this.complete;
  }).trigger('load');


 });



  wall.reset({
    selector: '.grid-container',
    animate: false,
    cellW: 200,
    cellH: 'auto',
    fixSize: 1,
    gutterX: 20,
    gutterY: 20,
    onResize: function() {
      wall.fitWidth();
      wall.refresh();
    },
  });

  wall.fitWidth();
  // });
});
</script>

现在，注释行是我从freewall.js演示中复制的，但对我的情况来说效果不太好。应该能够将所有图像存储在数组中，然后检查它们是否被计数直到不再剩下，然后显示所有图像，并且自由墙将重新适合它们在布局中。

我看到有一个错误：未捕获TypeError：对象47没有方法'on'

更新根据菲利克斯编辑，没有更多的错误。但它似乎没有按照预期的方式布置图像：在布局中重新拟合图像。

帮助或指导表示赞赏。提前谢谢。

Answer 1

您需要使用：

$('.grid-tile img').on('load', function() {

而不是：

$imgs.on('load error', function(){

因为var $imgs = $('.grid-tile img').length;返回一个字符串，而不是jQuery对象。

尝试加载图像，然后才能以pinterest布局布局

1 个答案: