js爆布特效 jQuery Wookmark

找了个插件实现该特效，很久之前在freebuf上就看到过这个特效，但是一直都不知道怎么实现，现在找到了一个插件就试用了一下。

刚好在某个项目里有这个需求，就测试了下。具体代码MARK一下，方便以后试用。

var handler = null;
var page = 1;
var isLoading = false;
var apiURL = 'http://www.wookmark.com/api/json?type=group&groupId=9'

// Prepare layout options.
var options = {
    align: 'center',
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('#tiles'), // Optional, used for some extra CSS styling
    offset: 2, // Optional, the distance between grid items
    itemWidth: 210 // Optional, the width of a grid item
};

/**
* When scrolled all the way to the bottom, add more tiles.
*/
function onScroll(event) {
    // Only check when we're not still waiting for data.
    if(!isLoading) {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
        if(closeToBottom) {
            loadData();
        }
    }
};

/**
* Refreshes the layout.
*/
function applyLayout() {
    // Clear our previous layout handler.
    if(handler) handler.wookmarkClear();
    
    // Create a new layout handler.
    handler = $('#tiles li');
    handler.wookmark(options);
};

/**
* Loads data from the API.
*/
function loadData() {
    isLoading = true;
    $('#loaderCircle').show();
    
    $.ajax({
        url: apiURL,
        dataType: 'jsonp',
        data: {page: page}, // Page parameter to make sure we load new data
        success: onLoadData
    });
};

/**
* Receives data from the API, creates HTML for images and updates the layout
*/
function onLoadData(data) {
    isLoading = false;
    $('#loaderCircle').hide();
    
    // Increment page index for future calls.
    page++;
    
    // Create HTML for the images.
    var html = '';
    var i=0, length=data.length, image;
    for(; i<length; i++) {
        image = data[i];
        html += '<li>';
        
        // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
        html += '<img src="'+image.preview+'" width="200" height="'+200+'">';
        
        // Image title.
        html += '<p>'+image.title+'</p>';
        
        html += '</li>';
    }

    // Add image HTML to the page.
    $('#tiles').append(html);
    
    // Apply layout.
    applyLayout();
};
    
$(document).ready(new function() {
    // Capture scroll event.
    // 注：官方的示例这里使用 $(document) 来绑定 scroll 事件是不支持 IE6-8 的，如需支持 IE6-8 请使用 $(window).bind('scroll', onScroll);
    //$(document).bind('scroll', onScroll);
    $(window).bind('scroll', onScroll);
    
    // Load first data from the API.
    loadData();
});

 

转载于:https://www.cnblogs.com/xiaoCon/p/3556344.html