网易星球钻石随机排列且不重叠代码实现

首先看一下网页星球钻石页面：

从图片可以看出钻石的排列是随机的且不重叠，那么怎么实现这样的效果呢？代码如下(vue)：

1.html部分

<template><div><div>{{randomArr}}</div><div class="my-balls"><span class="ball" v-for="(ball,index) in randomArr" :key="index" :style="{left: `${ball.left}px`,top:`${ball.top}px`}">{{ball.left}}-{{ball.top}}</span></div></div>
</template>

2.js部分

<script>
export default {data () {return {clientWidth: document.documentElement.clientWidth,randomArr: [],maxCount: 8}},created () {this.createdBalls()},methods: {createdBalls () {let count = this.maxCountconst showHeight = 160   //限制钻石生成区域高度const showWidth = this.clientWidth - 40while (count > 0) {const row = Math.floor(Math.random() * showHeight)const col = Math.floor(Math.random() * showWidth)if (this.randomArr.length === 0) {this.randomArr.push({left: col,top: row})count -= 1} else {const noOverlap = this.randomArr.every(v => Math.hypot(v.left - col, v.top - row) > 60)  //这里的主要目的就是来保证每次随机生成的点确定的图片位置不会有重叠if (noOverlap) {this.randomArr.push({left: col,top: row})count -= 1}}}}}
}
</script>

3.css部分

<style>.my-balls{position: relative;}.ball{position: absolute;width: 40px;height: 40px;background: red;}
</style>

4.效果实现

网易星球钻石随机排列且不重叠代码实现相关推荐

【Android自定义控件】之仿网易星球浮动小球
仿网易星球浮动小球读呗开发过程中遇到新需求,类似于网易星球收集黑钻的界面,考虑到可能也有人会使用,索性封装成库,后面好移植使用先看看需要实现的效果: 需求分析: 数据集合可能是int.double ...
小米加密兔正式内测上线，网易星球莱茨狗又多了新对手
前段时间小米公司就开始招聘区块链开发工程师了,短时间肯定会出一个项目试试水的.游戏项目因为成本低,必然是首选. 前几天已经放出内部消息,有部分人已经参加了上次的测试. 但是短暂上线后又突然下线.正 ...
网易星球区块链靠谱吗？看着点就知道
网易星球区块链靠谱吗?看着点就知道很多人都说2018年是区块链元年,很多大公司已经加入其中,甚至推出了手机挖矿的软件功能.因为这些手机软件不用挂机,安装几个对手机的影响并不大,很多人甚至每个月还能靠 ...
醉翁之意不在酒，网易“星球”意在用户数据
[数据猿导读] 所以当个人数据变得难以获取,那么让用户主动出卖数据,心甘情愿地将自己的"数字资产"双手奉上.这才是网易"星球"的真正目的吧. 记者 | 小北官 ...
重开排行榜，真实2克拉黑钻拍卖，你还愿意给网易星球一次机会吗
网易星球其实我都不关注网易星球了.看到今天刷屏的麻吉宝之后,忽然又想到了网易星球,顺道上去看了一眼.拍卖物中竟然有2克拉的黑钻. 黑钻拍卖原谅我孤陋寡闻,之前知道有彩钻,黑钻好像还真没听过--不过 ...
需抢购的加密兔成小米最大败笔，学习网易星球聚拢用户才是正途
加密兔最近小米加密兔在区块链宠物当中可谓一时风头无两,而你抢到加密兔了吗?也几乎和当年你抢到小米手机一样成为新的问候语.但平心而论,小米区块链游戏也使用饥饿营销的手段,真的是让人无法理解. 小米MI ...
度宇宙、网易星球、爱得钻……这些大的区块链项目能否借机重生？
文丨互链脉搏·黑珍珠号未经授权,不得转载! 10月31日,深交所创业公司管理部发布"关于对暴风集团股份有限公司的关注函",提及除已被批准逮捕的冯鑫外,暴风公司的高级管理人员已全部 ...
区块链宠物始祖CryptoKitties将登陆中国，莱茨狗网易星球害怕吗
迷恋猫全球第一个基于区块链并且最成功的游戏类产品谜恋猫(CryptoKitties)在中国大区正式上线. 迷恋猫官网作为以太坊上第一款区块链游戏,从去年11月28日发行以来,CryptoKitti ...
基于区块链的网易星球基地，可能是网易弯道超车BAT的最好机会了
网易星球网易市值目前409亿美元,不仅远远不及腾讯的5418亿美元和阿里的4884亿美元.也落后于百度的915亿美元和京东的650亿美元. 网易是中国最特立独行的公司,也是最注重产品体验的公司之一, ...

网易星球钻石随机排列且不重叠代码实现

网易星球钻石随机排列且不重叠代码实现相关推荐

最新文章

热门文章