如何在圆形的形式创建和放置浏览器的空位而不会相互碰撞？ [关闭]

Question

我有一个浏览器屏幕，我想在圆圈中显示用户列表及其名称和图像，如下所示：

我的代码：

 var $container = $("#container");
                var htmlString = "";
                var data1 = [{
                    "Name": "ABC",
                    "Url": "https://s-media-cache-ak0.pinimg.com/236x/5f/fa/06/5ffa0655ce8781a50113580f29828f53.jpg"
                }, {
                    "Name": "PQR",
                    "Url": "http://worldofarts.eu/wp-content/uploads/2014/09/3-flower-drawings-rose.jpg"
                }, {
                    "Name": "PQR",
                    "Url": "https://s-media-cache-ak0.pinimg.com/236x/e8/cf/c8/e8cfc83e4385505cf45a4099ee4073cb.jpg"
                }];

                $.each(data1, function (index, value) {
                    htmlString += '<div class="newDiv" id=' + index + '>' + value.Name + '</div>' + '<br>';
                });
                $container.append(htmlString);

 <style type="text/css">
        #container {
            display: block;
            width: 1500px;
            height: 600px;
            background: #ccc;
        }

        body {
            background-color: ivory;
            margin: 0;
            padding: 0;
        }

     

        .newDiv {
            width: 100px;
            height: 100px;
            min-width: 50px;
            min-height: 50px;
            background: #e00;
            position: absolute;
            border-radius: 50%;
            z-index: 2;
        }

        .bouncer {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<div id="container">
    </div>

在这里，我将每隔几秒发出一次ajax请求，这将从我的数据库中获取数据，并将新用户以圆形的形式放置，如上图所示，而不刷新页面。

但问题是，我怎么在屏幕上找到空位并把那个圆圈和我的圆圈碰撞就好如果你运行我的代码并看到了？

Answer 1

使用flexbox，您可以以任何您喜欢的方式安排用户div。看我的codepen http://codepen.io/keephacking/pen/VaGyEo：

display:flex; //for more see my codepen

不清楚你提到的空位。我希望你能用Flexbox概念做到这一点。

有关flexbox的更多信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

Answer 2

 var $container = $("#container");
                var htmlString = "";
                var margin = 0;
                var data1 = [{
                    "Name": "ABC",
                    "Url": "https://s-media-cache-ak0.pinimg.com/236x/5f/fa/06/5ffa0655ce8781a50113580f29828f53.jpg"
                }, {
                    "Name": "PQR",
                    "Url": "http://worldofarts.eu/wp-content/uploads/2014/09/3-flower-drawings-rose.jpg"
                }, {
                    "Name": "PQR",
                    "Url": "https://s-media-cache-ak0.pinimg.com/236x/e8/cf/c8/e8cfc83e4385505cf45a4099ee4073cb.jpg"
                }];

                $.each(data1, function (index, value) {
                    htmlString += '<div style="margin-left: '+ margin +'px;" class="newDiv" id=' + index + '>' + value.Name + '</div>' + '<br>';
                   margin += 100;
                });
                $container.append(htmlString);

 <style type="text/css">
        #container {
            display: block;
            width: 1500px;
            height: 600px;
            background: #ccc;
        }

        body {
            background-color: ivory;
            margin: 0;
            padding: 0;
        }

     

        .newDiv {
            width: 100px;
            height: 100px;
            min-width: 50px;
            min-height: 50px;
            background: #e00;
            position: relative;
            border-radius: 50%;
            z-index: 2;
            display:flex;
            clear:both;
        }

        .bouncer {
            position: relative;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<div id="container">
    </div>