1

我像 pinterest.com 一样微笑着工作。

我在我的项目中使用带有中继器、MS SQL DB 和砌体 jquery 插件的 Visual Studio 2010。

一切工作正常，但最大的问题是中继器一次加载所有数据，我希望它从数据库加载前 10 条图片记录，当用户滚动页面结束时加载接下来的 10 条图片记录，依此类推.. 像 infinet 页面就像 Facebook 和 pinterest.com 一样。我使用 SqlDataSource 组件从数据库中获取数据。

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

现场页面演示在这里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>

页面正文开始......

<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>
4

0 回答 0