支持无限加载的js图片画廊插件 |图片效果|下载

简要教程

natural-gallery-js是一款支持无限加载的js图片画廊插件。该js图片画廊支持图片的懒加载，可以对图片进行搜索，分类，还可以以轮播图的方式来展示和切换图片。

使用方法

在页面中引入下面的CSS和js文件。

HTML结构

使用一个

作为图片画廊的容器。

然后添加PhotoSwipe轮播图模板。

以及下面的一些操作图标。

初始化插件

最后通过下面的js代码来初始化该图片画廊插件。

var containerRef = document.getElementById('myGallery'); // uses HTMLElement reference as container
var photoswipeRef = document.getElementById('myPhotoswipe'); // photoswipe template if required

// Create your gallery options
var options = {

    format: 'natural | square',

    // Max row height. Works for both natural and square format. Prefer this option for a "responsive" approach
    rowHeight: 350,

    // Only for square format. Disables responsive
    imagesPerRow: 4,

    round: 3, // Rounded corner
    margin: 3, // Gap between thumbnails
    limit: 0, // Number of rows, activate pagination (disables infinite scroll)
    minRowsAtStart: 2, // Initial number of rows. If null, gallery tries to define the number of required rows to fill the viewport.

    showLabels: 'hover | always | never', // When to show the labels in thumbnails

    lightbox: true, // Open a lightbox with a bigger image -> activate a zoom effect on hover on thumbnails
    zoomRotation: true,

    // Number of pixels to offset the infinite scroll autoload
    // If negative, next rows will load before the bottom of gallery container is visible
    // If 0 the next rows will load when the bottom of the gallery will be visible
    // If positive, the next rows will load when the bottom of the gallery will be this amount above the end of the viewport.
    // If positive be sure to always have this number of pixels as margin, padding or more content after the gallery.
    infiniteScrollOffset: 0,

    // Header / Search options.
    showCount: false,
    searchFilter: false,
    categoriesFilter: false,
    showNone: false,
    showOthers: false,
    labelCategories: 'Category',
    labelNone: 'None',
    labelOthers: 'Others',
    labelSearch: 'Search',
    labelImages: 'Images',
};

var images  = [
    {
        "thumbnail": "thumb.jpg",
        "enlarged": "big.jpg",
        "title": "Antonio Ron",
        "categories": [
            {
                "id": 4,
                "title": "Nature",
                "photo_count": 41787,
                "links": {
                    "self": "https://api.unsplash.com/categories/4",
                    "photos": "https://api.unsplash.com/categories/4/photos"
                }
            }
        ],
        "tWidth": 443.74009508716324,
        "tHeight": 300,
        "eWidth": 2800,
        "eHeight": 1893
    },
    {...}
];


// Create a gallery
var gallery = new Gallery(containerRef, photoswipeRef, options);

该支持无限加载的js图片画廊插件的github地址为：https://github.com/Ecodev/natural-gallery-js