砌体无限滚动

时间:2013-08-14 10:03:42

标签: javascript html jquery-masonry infinite-scroll

我不知道JavaScript,但我真的很喜欢这个网站。 这是我用于砌体的JavaScript。有人可以告诉我如何让无限卷轴工作吗?我用Google搜索没有运气。

<script>
    (function($){ 

//Finding min and max values in array from http://snippets.dzone.com/posts/show/769
Array.prototype.min = function(){ return Math.min.apply({},this) };
Array.prototype.max = function(){ return Math.max.apply({},this) };

$.fn.masonry = function() {
    this.each(function() {

        var wall = $(this);

        if ( wall.children().length > 0 ) { // check if the element has anything in it

            if( wall.children('.masonryWrap').length == 0 ) {      // checks if the masonryWrap div is already there
                wall.wrapInner('<div class=\"masonryWrap\"></div>');
            }
            var mWrap = wall.children('.masonryWrap');

            var brick = mWrap.children();
            var brickW = brick.outerWidth(true);
            var colCount = Math.floor( mWrap.width() / brickW ) ;

            var colH=new Array();
            for ( i=0; i < colCount; i++) {
                colH[ i ] =  0 ;
            }       

            mWrap.css({ position: 'relative' });

            brick.css({
                    float: 'none',
                    position: 'absolute',
                    display: 'block'
                })
                .each(function(){
                    for ( i=colCount-1; i > -1; i-- ) {
                        if ( colH[ i ] == colH.min() ) {
                            var thisCol = i;
                        }
                    }
                    $(this).css({
                        top: colH[ thisCol ],
                        left: brickW * thisCol
                    });
                    colH[ thisCol ] += $(this).outerHeight(true);
                });

            mWrap.height( colH.max() );
        }

        return this; 
    });
};
})(jQuery);

</script>

1 个答案:

答案 0 :(得分:0)

使用其中一个主题http://zen-themes.tumblr.com/,其中已经内置了无限滚动和砌体,或者搜索更多。相信我,我以前遇到过这个问题,而且已经有很多关于砌体和无限卷轴的帖子了。