Question

在我的html应用程序中，我想要一个n * n网格并只显示其中的一部分它在任何时候。
每个图块都显示html内容而不是图像。
用户可以水平或垂直滚动一行或一列。
当新地块在地图上加载时，它应该通过加载内容阿贾克斯。

我通过了许多不同类别轮播，磁贴引擎，地图渲染库和...的js库。

每个类别的图书馆都缺少一件事。

轮播 - 双向滚动和网格不存在
平铺引擎 - 无法使用平铺的异步加载。
地图渲染器 - 仅支持图层/图像。

建议我一个最适合这个要求的合适的库。

Answer 1

尝试使用iScroll.js它将起作用

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>
<div id="vertical">
    <div id="vert_scroller">

    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var HTML = "";
        for(i=0;i < 10;i++){
            HTML += '<div id="sc'+i+'" class="innerWrap"><div class="innerSc"><span>'+(Math.random()*64654).toString()+'</span></div></div>';
        }
        $("#vert_scroller").html(HTML);
        myScroll = new iScroll('vertical');
        for(i=0;i<10;i++){
            innerScroll_1 = new iScroll('sc'+i);
        }
    })
</script>


    #vertical{
    top:0px;
    left:0px;
    position:relative;
    height:300px;
    width:300px;
    z-index:1;
    letter-spacing: 1em;
}

#vert_scroller{
    width:100%;
    display:inline-block;
}
.innerWrap{
    height:40px;
    width:100%;
    position:relative;
    z-index:1;
    top:0px;
    left:0px;
}
.innerSc{
    padding:10px;
    width:450px;
    display:inline-block;
    border-bottom:1px solid black;
}

双向可滚动的旋转木马

1 个答案: