Question

我正在使用Masonry插件设计一个网站，并且在加载图片时存在重叠图像的问题。我听说这是这个插件的常见经验，但我不知道如何调用哪个命令以及在哪里以防止它加载错误。

以下是受影响的代码：

HTML

<html>
<body>    
<div id="grid" class='grid' onload="$grid.masonry()">
    <?php
    $dir="image/";
        //open dir
        if ($opendir=opendir($dir))
        {
            //readdir

            while($file=readdir($opendir))

                if ($file!="."&&$file!="..")

                    {
                {$filename = pathinfo($file, PATHINFO_FILENAME);

            echo"

            <div id='item' class='grid-item','gallery'>
            <a href='$dir/$file'>
            <div id='masks' class='mask'></div>
            <div id='title' class='text'>$filename</div>
            <img src='$dir/$file' onmouseover='hover()' onmouseout='hoverout()'>
            </a>
            </div>

        ";
            }

        }
        }
        ?>
        </div>
        </div>

<script src="js/masonry.pkgd.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
    <script>
  $('.gallery-masonry').imagesLoaded( function(){
    $('.gallery-masonry').masonry({
     itemSelector: '.item',
     isAnimated: true,
     isFitWidth: true
    });
  });
</script>
</body>
</html>

的jQuery

    /* Masonry */
var $grid=
$(".grid").masonry({
  itemSelector: ".grid-item",
  columnWidth: 500,
  percentPosition: true,
  originLeft: false,
});

$(".grid").masonry({
  columnWidth: 5,
  gutter:5,
  itemSelector: '.grid-item'
});



$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });


var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
  console.log( imgLoad.images.length + ' images loaded' );
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    var image = imgLoad.images[i];
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  }
});

砌体中的图像重叠

0 个答案: