CollagePlus 图片混排画廊 jQuery 插件

Question

CollagePlus 会自动排列你的图像，以便完全符合一个容器的尺寸， 您可以自定义图像之间的填充间距、图像的CSS边界和定义一个目标行的高度。

使用方法

1、引入文件

<script src="http://cdn.wenjiangs.com/libs/jquery/2.0.2/jquery.js"></script>
<script src="jquery.collagePlus.min.js"></script>
<script src="jquery.removeWhitespace.min.js"></script>
<script src="jquery.collageCaption.min.js"></script>

2、编写 HTML 图片代码

// example HTML image gallery
<div class="Collage">
  <img src="example1.jpg" />
  <img src="example2.jpg" />
  <img src="example3.jpg" />
</div>

3、最后初始化插件

<script>
// collagePlus-ify it!
$('.Collage').collagePlus();
</script>

使用自定义参数

$('.Collage').removeWhitespace().collagePlus({
  'fadeSpeed' : 2000,
  'targetHeight' : 200
}).collageCaption();

自适应窗口大小

var resizeTimer = null;
$(window).bind('resize', function() {
  // hide all the images until we resize them
  $('.Collage .Image_Wrapper').css("opacity", 0);
  // set a timer to re-apply the plugin
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(collage, 200);
});

点击这里查看示例：/wp-content/uploads/2018/jquery-collagePlus/examples/example.html