Jq页面滚动加载

jq共用部分几乎不用修改

<script>
    //options.load:方法，加载的过程
    //options.marginBottom:数值，默为0，触发加载的内部块与外部块底部的距离
    //options.stop:方法，停止滚动加载的条件，默认返回false，一直加载
	( function ( $ ) {
    $.fn.scrollLoad = function ( options ) {
        var self = $( this );
        var inner = self[0] === window ? $( 'body' ) : self.children().first();
        if ( inner.length == 0 ) {
            throw 'No elements included';
        }
        options = $.extend( {
            delay: 0,
            marginBottom: 300,
            load: function ( success ) {
                console.log( 'Load function not set' );
                success();
            },
            stop: function () {
                return true;
            }
        }, options );
        var getMargin = function ( name ) {
            return Math.floor( parseFloat( this.css( name ).replace( 'px', '' ) ) );
        }
        var getScrollAll = function () {
            var marginBottom = getMargin.call( inner, 'margin-bottom' );
            var marginTop = getMargin.call( inner, 'margin-top' );
            return inner.outerHeight() + marginTop + marginBottom;
        };
        var isLoad = false, loadCount = 0;
        var init = function () {
            if ( getScrollAll() < self.height() && loadCount++ < 100 ) {
                options.load( function () {
                    !options.stop() && init();
                } );
            }
        };
        init();
        self.on( 'scroll', function () {
            if ( options.stop() ) {
                self.unbind( 'scroll' );
                return;
            } else if ( loadCount++ > 1000 ) {
                throw 'Whether the stop condition is set incorrectly';
            }
            if ( !isLoad && self.scrollTop() + self.height() + options.marginBottom >= getScrollAll() ) {
                isLoad = true;
                setTimeout( function () {
                    options.load( function () {
                        isLoad = false;
                    } );
                }, options.delay );
            }
        } );
    };
} )( jQuery );
</script>

开始加载

<script>
//加载动画
function waterFall( key ) {
    $( "#clearfix_" + key ).fadeTo( 500, 0.8 );
    $( "#clearfix_" + key ).fadeTo( 500, 0.45 );

}
//加载数据
function ViewData( key, value ) {
    $.post( '/Recommend/index', { mfName: value, 'searchKey': '', 'pageIndex': 1, 'pageSize': 8 }, function ( datas ) {
        $( "#clearfix_" + key ).html( datas );
        $( "#clearfix_" + key ).fadeTo( 800, 1 );
    } );
};
$( function () {
    var index = 0;
    $( window ).scrollLoad( {
        marginBottom: 300,
        load: function ( success ) {
            var subArray = array.shift();//移除第一个元素,并返回当前移除的元素
            if ( subArray != undefined ) {
                $( '#container_' + subArray.key ).show();
                $( '#container_' + subArray.key + ' .wjl_adTop' ).flexslider( {
                    animation: "slide",
                    direction: "vertical",
                    easing: "swing",
                    directionNav: false, //是否显示左右控制按钮 true&false
                    controlNav: false
                } );
                waterFall( subArray.key );
                ViewData( subArray.key, subArray.mfs );
                index++;
            }
            success();
        },
        stop: function () {
            return array.length == 0;
            //   $.isEmptyObject(obj)
        }
    } )
} );
//手动定位 左侧带有导航栏的
function myjump( event, jump ) {
    index = 0;
    var subArray = [];
    $.each( array, function ( idx ) {
        if ( array[idx] != undefined && array[idx].key == jump ) {
            subArray = array[idx];//idx为数组下标
            array[idx] = undefined;

        }
    } );
    //轮播效果
    if ( subArray != undefined ) {
        $( '#container_' + subArray.key ).show();
        $( '#container_' + subArray.key + ' .wjl_adTop' ).flexslider( {
            animation: "slide",
            direction: "vertical",
            easing: "swing",
            directionNav: false, //是否显示左右控制按钮 true&false
            controlNav: false
        } );
        if ( $.isEmptyObject( subArray ) ) {
            waterFall( jump );
        } else {
            waterFall( jump );
            ViewData( subArray.key, subArray.mfs );
            index++;
        }
    }
}

数组

<script>
var array = @Html.Raw(data.Select(item=>new {mfs= item.Mfs.Select(mf=>mf.Name).ToArray(),key= item.Key }).ToJson());
//加载动画
</script>

//左侧导航栏