是否有一种优雅的方法来随机化jscroll中的div位置？

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”中，并自动引用父组。

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

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 个解决方案

解决方案1
0 2016-05-17 08:37:57

是否有一种优雅的方法来随机化jscroll中的div位置？

问题描述

1 个解决方案

解决方案1 0 2016-05-17 08:37:57

解决方案1
0 2016-05-17 08:37:57