有没有一种优雅的方式来随机化 jscroll 中的 div 位置？答案

【问题标题】：Is there an elegant way to randomize div position within jscroll?有没有一种优雅的方式来随机化 jscroll 中的 div 位置？
【发布时间】：2016-09-13 05:25:56
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html infinite-scroll jquery-jscroll

【解决方案1】：

对于非延迟体验，您应该将随机 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);

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

【讨论】：