响应式图片，在不同尺寸下切换不同张数

全局标记变量

let displaySize = 3; //默认展示图片数量
let displayIndex = 0; //默认从第一张开始显示

resize 事件

$(window).on('resize', function () {
        let width = $(this).width();
        let $li = $('.similar .similar-home');
        let len = $li.length;
        if (width > 1020) {
            displaySize = 3;
            $li.hasClass('middle-screen') && $li.removeClass('middle-screen');
            $li.hasClass('small-screen') && $li.removeClass('small-screen');
        } else if (width > 600) {
            displaySize = 2;
            $li.hasClass('middle-screen') || $li.addClass('middle-screen');
            $li.hasClass('small-screen') && $li.removeClass('small-screen');

        } else {
            displaySize = 1;
            $li.hasClass('middle-screen') && $li.removeClass('middle-screen');
            $li.hasClass('small-screen') || $li.addClass('small-screen');
        }
        let wholeList = Array.prototype.slice.call($('.similar .similar-home'));
        toggleShowList(wholeList, displayIndex, displaySize);
    }).trigger('resize');

封装的函数

/**
 * 
 * @param {*} wholeList arrayLiked object dom-list
 * @param {*} displayIndex int
 * @param {*} displaySize int
 */
function toggleShowList(wholeList, displayIndex, displaySize) {
    let len = wholeList.length;
    let showList = [];
    if (displayIndex + displaySize < len) {
        showList = wholeList.splice(displayIndex, displaySize);
    }else{
        showList = wholeList.splice(displayIndex, len).concat(wholeList.splice(0,(displayIndex+displaySize-len)));
    }
    for (let i = 0, len = wholeList.length; i < len; i++) {
        $(wholeList[i]).css('display', 'none');
    }
    for (let i = 0, len = showList.length; i < len; i++) {
        $(showList[i]).css('display', 'block');
    }
}

点击切换

// Data.CLick 的值为navigator.userAgent.match(/iphone|ipad|ipod|android|windows phone/i)?'touchstart':'click';
$('.similar').on(Data.CLICK, '.change-house', function () {
    let wholeList = Array.prototype.slice.call($('.similar .similar-home'));
    let maxIndex = wholeList.length;
    displayIndex += displaySize;
    if (displayIndex > maxIndex) {
        displayIndex = 0;
    }
    toggleShowList(wholeList, displayIndex, displaySize);
});