具有动态尺寸图像的马赛克网格图库[关闭]


80

我刚收到一个项目的以下设计,一个用于图像网格画廊的图片,其中包含动态的宽度和高度图像(用户提交的图像)。(截图在帖子末尾)

我尝试了jQuery MasonryTympanus自动图像蒙太奇CSS-Tricks无反应式响应照片网格,但是每个都有其局限性。

  • Jquery Masonry允许宽度和高度都是动态的,但是会产生间隙
  • 后两个脚本生成非常漂亮的网格,但是存在宽度或高度必须为静态的问题

编辑:我碰到了同位素,它几乎是完美的,除非有能够完全满足我需求的东西,否则我可能最终会使用它。因此,我的问题仍然保持不变。

是否有任何javascript(最好是jQuery)脚本可以生成完全动态的马赛克(相对于图像大小),如下面的屏幕截图所示?

谢谢你的帮助


画廊


谢谢,这看起来像我需要的。您能否将此添加为答案,以便我可以适当地给您功劳并将问题标记为已回答?
Dogoku

@Dogoku您可以分享如何在同位素中同时使高度和宽度动态变化吗?
Mark Vital 2012年

警告:“鼓膜自动图像蒙太奇”链接是有问题的垃圾。
2013年

您可以使用unitegallery。它反应灵敏,有可用的类似链接,图标,收藏夹等各种选项
RN Kushwaha

我想要与上图相同的输出。图像的大小不同,但最后不要有任何间隙。Freewall Metro样式网格对我不起作用,因为所有都是图像。请帮忙!
monisha

Answers:


64

我建议Freewall。它是一个跨浏览器和响应式jQuery插件,可帮助您创建多种类型的网格布局:灵活的布局,图像布局,嵌套的网格布局,Metro样式布局,pinterest之类的布局...具有不错的CSS3动画效果和回调事件。Freewall是用于为台式机,移动设备和平板电脑创建动态网格布局的多合一解决方案。

主页和文档:也找到了here


12
学习这样的:可能是有益的crispymtn.com/stories/...
mayankcpdixit

@mayankcpdixit,这非常有帮助,谢谢
zavr

1
tnx @zavr我做了自己的事。github.com/mayankcpdixit/grid-no-white
mayankcpdixit 2014年

@mayankcpdixit,很酷,做得好。我也制作了自己的jQuery插件。
zavr 2014年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.