使用JQuery插件Pinto 和Lightbox 制作带网格布局的响应式(Responsible)

我的原文所在 http://yanmin.in/archive.html

Pinto(使用方法:http://www.jqueryscript.net/layout/Pinterest-Like-Responsive-Dynamic-Grid-Layout-Plugin-Pinto.html)用于制作网格化画廊布局,特点如下:

Features:

Super simple and lightweight.
Auto rearrange images with a smooth CSS3 transition on window resize.
Fluid item width based on the viewport size.

效果如:http://www.jqueryscript.net/demo/Pinterest-Like-Responsive-Dynamic-Grid-Layout-Plugin-Pinto/
但是Pinto 不自带响应效果,因此结合Lightbox使用.

Lightbox(使用方法:http://www.jqueryscript.net/lightbox/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin.html )也具有布局效果,但是可以用Pinto 的布局,其自带的图片放大和幻灯片试展示效果不错,其特点如下:

Features:

Responsive and touch friendly.
Image preloading and loading spinner.
CSS3 powered animations.
Keyboard / Touch swipe navigation.
Custom image aspect ratio.

效果如:http://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/.

Thank you so much for looking over my blog and hopefully you found this useful!