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

Question

I lay out a series of divs in random, non-overlapping positions. 我在随机，不重叠的位置布置了一系列div。

I use jscroll to add more divs when the user reaches the bottom of the page. 当用户到达页面底部时，我使用jscroll添加更多div。 However, those new divs should also be randomly placed and absolutely positioned. 但是，这些新的div也应该随机放置和绝对放置。

What is an efficient way to do this? 什么是有效的方法？ I'm having trouble both (1) applying the random position javascript to new elements and (2) providing a reasonable non-laggy experience. 我在（1）将随机位置javascript应用于新元素和（2）提供合理的非延迟体验方面都遇到麻烦。

Current base code: if I were randomly adding dots with endless scroll, how would I get the new set of dots to be randomly placed? 当前的基本代码：如果我随机添加无穷滚动点，那么如何将新的点集随机放置？

<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

For the non laggy experience you should put the random divs into groups. 对于没有经验的人，您应该将随机div分组。 Each group would be a div that takes the total screen height, so it's just like scrolling on invisible page, and you would only have to create the groups one by one, each time the previous one has reached a certain amount of scroll. 每个组都是一个占整个屏幕高度的div，因此就像在不可见的页面上滚动一样，每次前一个组达到一定滚动量时，您都只需一个一个地创建组。

For the position, the groups must be in "position:relative" so the dots inside can be in "position:absolute" and will automaticaly refer to the parent group. 对于位置，组必须位于“ position：relative”中，因此内部的点可以位于“ position：absolute”中，并自动引用父组。

You could generate each page with just a jquery string, by first calculating the screen height, and create the div with relative position, and then apply random position inside a loop : 通过首先计算屏幕高度，并使用相对位置创建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);

This is the basic code to apply on each certain amount of scroll 这是适用于每个特定滚动量的基本代码

是否有一种优雅的方法来随机化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