0

我在随机、不重叠的位置布置了一系列 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>
4

1 回答 1

0

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

对于位置，组必须在“位置：相对”，所以里面的点可以在“位置：绝对”，并且会自动引用父组。

您可以只用一个 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);

这是适用于每个特定滚动量的基本代码

于 2016-05-17T08:37:57.557 回答