首页
话题
消息
手册
我的

CollagePlus 图片混排画廊 jQuery 插件

发布于 2018-06-18 字数 1725 浏览 1094 评论 0

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

CollagePlus 图片混排画廊 jQuery 插件

使用方法

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

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!