javascript - 双向滚动轮播

Question

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

我浏览了许多不同类别的 js 库轮播、图块引擎、地图渲染库和......

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

• Carousels - 双向滚动和网格不存在
• 瓦片引擎 - 瓦片的异步加载不可用。
• 地图渲染器 - 仅支持图层/图像。

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

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;
}