Question

我在随机，不重叠的位置布置了一系列div。

当用户到达页面底部时，我使用jscroll添加更多div。然而，这些新的div也应随机放置并绝对定位。

有效的方法是什么？我同时遇到了麻烦（1）将随机位置javascript应用于新元素，以及（2）提供合理的非滞后体验。

当前基本代码：如果我随机添加带有无限滚动的点，我将如何将新的点集随机放置？

<head>
    <title>desert</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.jscroll/2.2.4/jquery.jscroll.min.js"></script>
</head>

<body>
    <div class="word">
        .
    </div>
    <div class="word">
        .
    </div>
    <div class="word">
        .
    </div>

    <a href="extrastuff.html"></a>

    </div>

    <script>
        ** Randomly assigns .word elements a non - overlapping position **
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#desert').jscroll({
                padding: 2000,
                loadingHtml: ''
            });
        });
    </script>
</body>

</html>

Answer 1

对于非滞后体验，您应该将随机div分组。每个组都是一个占据屏幕总高度的div，所以它就像在不可见的页面上滚动一样，只需要逐个创建组，每次前一个组都达到一定的滚动量。

对于位置，组必须处于“position：relative”，因此内部的点可以位于“position：absolute”中，并自动引用父组。

你可以用jquery字符串生成每个页面，首先计算屏幕高度，然后用相对位置创建div，然后在循环中应用随机位置：

var screenHeight = (calculate screen height here);

var group = '<div class="page" style="height:'+screenHeight+'px;width:100%; position:relative;">';
for(var i=0;i<4;i++)
{

    group += '<div class="word" style="top:'+Math.random()*100+'%;left:'+Math.random()*100+';position:absolute;" >.</div>';
}
group += '</div>';

body.append(group);

这是应用于每个特定卷轴

的基本代码

是否有一种优雅的方式可以在jscroll中随机化div位置？

1 个答案: