Question

我像pinterest.com一样工作。

我在我的项目中使用带有转发器，MS SQL DB和masonry jquery插件的Visual Studio 2010。

每件事情都很好，但最大的问题是转发器一次加载所有数据，我希望它从DB加载前10张图片记录，当用户滚动页面结束然后加载下10张图片记录等等在 ..像infinet页面一样像Facebook和pinterest.com。我使用SqlDataSource组件从DB获取数据。

帮我解决这个问题，欢迎任何建议或想法或链接。

实时页面演示在www.bhinderblink.com

页面标题编码....

<script type="text/javascript">
    $(function () {
        $('#container').masonry({ // options 
            itemSelector: '.item', columnWidth: 240,
            isAnimated: true,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            alert("end of the page");
        }
    });
</script>

Page Body start .....

<form id="form1" runat="server">
<div id="topBanner">
</div>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <div id="container">
            <div class="item">
                <a id="a" href="#">
                    <asp:Image ID="myimage" runat="server" ImageUrl='<%#"~/" + Eval("pic_path") + Eval("pic_name") + ".jpg" %>' />
            </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT pic_name, pic_path FROM pic_info"></asp:SqlDataSource>
</form>

在页面滚动上加载Repeater DB Data

0 个答案: