是否有一種優雅的方法來隨機化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