• 使用masonry插件做瀑布流效果div出现叠层的问题
  • 发布于 2个月前
  • 147 热度
    1 评论
  • 林永贵
  • 2 粉丝 19 篇博客
  •   

最近在使用masonry插件做网页的瀑布流排列效果,当一次加载的图片比较多时会出现div叠在一起的问题,这种问题有谁遇到过吗?该怎么解决?

加载图片比较少时,基本正常,效果如下:

但是,当加载的图片比较多时,div就叠在一起了,效果如下:


用户评论
  • 康康
  • 使用masonry插件加载瀑布流图片出现div叠层的问题主要是因为当图片未完全加载完成masonry插件计算图片高度不准确,所以会出现两个甚至几个div叠在一起的问题,要解决这个问题,你可以去网上下载这个 imagesLoaded 插件,这个插件可以检测图片是否已加载完成。

    简单的使用例子:

    <script type="text/javascript">
      // 初始化Masonry插件
    	    var $grid = $('.grid').masonry({
    	});
    	//在所有图片加载完成后重新计算布局
    	$grid.imagesLoaded().progress(function () {
    	    $grid.masonry('layout');
    	});
    	</script>

  • 2018/6/16 15:35:00 [ 0 ] [ 0 ] 回复