【Web前端问题】QQ 空间的"好友印象" 像是随机分布坐标的.但它怎样保证一个印象不被另一个印象完全挡住?

Z时代
2024-01-10
分类：技术分享

好友印象

我有一个思路, 每创建一个"印象" , 随机生成 x , y ; 并记录记录它的 x , y , width , height 在 _items 里.

记录之前, 拿 x y 在 _item 中做对比 , 如果挡住其它"印象" , 向上或向下移动. 然后再拿新坐标进行对比(递归) .

var main = jQuery( select ).empty();
var mainSize = {
    width  : main.width(),
    height : main.height()
};
var _items = [];
/**
 * 生成随机坐标
 * @param {Object} size 
 * @return {Object} 
 */
var randomCoordinate = function( size ) {
	var x = Math.round( Math.random() * ( mainSize.width - size.width ) );
	var y = Math.round( Math.random() * ( mainSize.height - size.height ) );
	//判断坐标,是否会挡住其它印象
	var ret = checkXY( x , y , size  );
	return {
		x : ret.x ,
		y : ret.y ,
		width  : size.width ,
		height : size.height
	};
};
/**
 * 判断坐标,是否会挡住其它印象
 * @param {Int} x 
 * @param {Int} y 
 * @param {Object} size 
 * @return {Object} 
 */
var checkXY = function( x , y , size  ) {
	for(var i = 0 , len = _items.length; i < len; i++ )
	{
		var v = _items[ i ];
		var minX = v.coordinate.x ,
		    maxX = v.coordinate.x + v.coordinate.width ,
		    minY = v.coordinate.y ,
		    maxY = v.coordinate.y + v.coordinate.height;
		var block = {
			x : false ,
			y : false
		};
		//判断 x 是否会挡住
		block.x = ( x + size.width < minX || x > maxX ) ? false : true
		//判断 y 是否会挡住
		block.y = ( y + size.height < minY || y > maxY ) ? false : true
		//如果完全挡住，移动
		if( block.x && block.y )
		{
			//如果可以向下移
			if( ( y + size.height + v.coordinate.height ) <= mainSize.height )
			{
				y = y + v.coordinate.height + size.height;				
			}
			//如果可以向上移
			else if( y - v.coordinate.height - size.height >= 0 )
			{
				y = y - v.coordinate.height - size.height
			}
			return checkXY( x , y  , size  );		
		}	
	}
	return {
		x : x ,
		y : y	
	};
};
var _data = ['0球迷' ,'1领导' ,'2出来打星洲' ,'3球迷' ,'4领导' ];
jQuery.each( _data , function( k , v ) {
    var tag = jQuery( '<div>' + v + '</div>' ).appendTo( main );
    //生成随机的x , y ,　且确保自身不会完全挡住其它tag
    var coordinate = randomCoordinate( { width : tag.width() , height : tag.height() } );
    tag.css({
	left : coordinate.x,
	top  : coordinate.y
    });
    _item[ _item.length ] = { tag : tag , coordinate : coordinate };
});