延迟加载+同位素适应

时间:2016-09-16 10:24:03

标签: php lazy-loading jquery-isotope

我试图改编这篇文章中的解释:

Lazy Load + Isotope

我的理由:

http://40parallele.com/produits-test.php?id=4

但缺少某些东西......

这是我的js代码:

// Isotope
$j(window).load(function()
{
    // lazyload
    var $win = $(window);
    var $imgs = $('img.lazy');
    var $container = $j('#folio');

    // calcul la taille des images
    $imgs.each(function(index) {
        var item_height = $(this).attr("height");
        $(this).parent().parent().css("height",item_height);
    });


    if( $container.length )
    {
        $container.isotope(
        {
            itemSelector : '.folio-item'
        });

        var $optionSets = $j('#portfolio .folio-filter'),
            $optionLinks = $optionSets.find('a');

        $optionLinks.click(function()
        {
            var $this = $j(this);
            // don't proceed if already selected
            if ( $this.hasClass('selected') ) 
            {
                return false;
            }
            var $optionSet = $this.parents('.folio-filter');

            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');

            // make option object dynamically, i.e. { filter: '.my-filter-class' }
            var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');

            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[ key ] = value;

            if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) 
            {
                changeLayoutMode( $this, options );
            } else {
                // otherwise, apply new options
                $container.isotope( options );
            }    
            return false;
        });
    }

    $container.isotope({
        onLayout: function() {
            $win.trigger("scroll");
        }
    });

    /*OK*/
    $imgs.lazyload({
        failure_limit: Math.max($imgs.length - 1, 0)
    });

});

$j(window).bind('resize', function(e)
{
    window.RT = setTimeout(function() {$j('#folio').isotope('reLayout'); }, 800);
});

感谢您的帮助

0 个答案:

没有答案