javascriptalgorithmframeworkslogic
The displacement of the elements on the grid with a minimum number of empty cells
Tell me, please, whether there are algorithms or ready solutions for displacing elements inside the grid, so that the elements that have been displaced occupy places on the grid with a minimum number of empty cells.
For example:
It was
Chosen at 9. The block with 1 decreased to one cell. A block with 9 increased to six cells.
It is necessary to scatter the elements that were expelled from the vacant places.
Solution
My version of the solution through pre-written states:
/* Получение состояния в которое необходимо перейти */
function getTransition(state, selected) {
/* Переходы */
var transition = {
/* Текущие состояние */
1: {
/* В какое состояние перейти */
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 4,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
2: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
3: {
autohydraulic: 1,
onboardcars: 13,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
4: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 4,
cranes: 5,
tugboats: 14,
firetrucks: 15,
doublerowcabins: 8
},
5: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 4,
cranes: 5,
tugboats: 16,
firetrucks: 7,
doublerowcabins: 8
},
6: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 15,
doublerowcabins: 8
},
7: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 16,
firetrucks: 7,
doublerowcabins: 8
},
8: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 17,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 15,
doublerowcabins: 8
},
9: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 16,
firetrucks: 15,
doublerowcabins: 18
},
10: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 17,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
11: {
autohydraulic: 19,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 4,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
12: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 12,
cranes: 20,
tugboats: 16,
firetrucks: 7,
doublerowcabins: 8
},
13: {
autohydraulic: 19,
onboardcars: 13,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 4,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
14: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 4,
cranes: 20,
tugboats: 14,
firetrucks: 7,
doublerowcabins: 8
},
15: {
autohydraulic: 1,
onboardcars: 21,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 15,
doublerowcabins: 8
},
16: {
autohydraulic: 1,
onboardcars: 21,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 16,
firetrucks: 7,
doublerowcabins: 8
},
17: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 17,
trailers: 12,
cranes: 5,
tugboats: 16,
firetrucks: 22,
doublerowcabins: 8
},
18: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 16,
firetrucks: 22,
doublerowcabins: 18
},
19: {
autohydraulic: 19,
onboardcars: 13,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
20: {
autohydraulic: 1,
onboardcars: 21,
sleepcabins: 10,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 20,
tugboats: 6,
firetrucks: 7,
doublerowcabins: 8
},
21: {
autohydraulic: 1,
onboardcars: 21,
sleepcabins: 10,
dumpers: 3,
airports: 9,
trailers: 4,
cranes: 20,
tugboats: 16,
firetrucks: 7,
doublerowcabins: 8
},
22: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 23,
dumpers: 11,
airports: 17,
trailers: 12,
cranes: 5,
tugboats: 6,
firetrucks: 22,
doublerowcabins: 8
},
23: {
autohydraulic: 1,
onboardcars: 2,
sleepcabins: 23,
dumpers: 11,
airports: 9,
trailers: 12,
cranes: 5,
tugboats: 16,
firetrucks: 22,
doublerowcabins: 8
}
};
return transition[state][selected];
}
/* Получение конкретного состояния по его идентификатору */
function getStatesByItem(id) {
/* Состояния элементов при выбранном активном элементе */
var states = {
/* Порядковые номера для состояний */
1: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-3',
airports: 'row-2 col-4',
trailers: 'row-3 col-3',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
2: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-2',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
3: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-2 col-1',
sleepcabins: 'row-1 col-4',
dumpers: 'row-1 col-2',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
4: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-2 col-2',
cranes: 'row-4 col-1',
tugboats: 'row-3 col-1',
firetrucks: 'row-1 col-2',
doublerowcabins: 'row-4 col-4'
},
5: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-3',
airports: 'row-2 col-4',
trailers: 'row-3 col-3',
cranes: 'row-2 col-1',
tugboats: 'row-1 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
6: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-2 col-2',
firetrucks: 'row-1 col-2',
doublerowcabins: 'row-4 col-4'
},
7: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-1 col-2',
firetrucks: 'row-2 col-2',
doublerowcabins: 'row-4 col-4'
},
8: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-2',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-1 col-2',
doublerowcabins: 'row-2 col-3'
},
9: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-3',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-2 col-2',
firetrucks: 'row-1 col-2',
doublerowcabins: 'row-3 col-2'
},
10: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-2',
sleepcabins: 'row-1 col-3',
dumpers: 'row-2 col-1',
airports: 'row-2 col-2',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
11: {
autohydraulic: 'row-2 col-3',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-1 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-3',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
12: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-3',
airports: 'row-2 col-4',
trailers: 'row-2 col-1',
cranes: 'row-3 col-3',
tugboats: 'row-1 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
13: {
autohydraulic: 'row-1 col-3',
onboardcars: 'row-1 col-1',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-3',
airports: 'row-2 col-4',
trailers: 'row-3 col-3',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
14: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-3',
airports: 'row-2 col-4',
trailers: 'row-3 col-3',
cranes: 'row-1 col-2',
tugboats: 'row-2 col-1',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
15: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-4 col-2',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-3',
firetrucks: 'row-1 col-2',
doublerowcabins: 'row-4 col-4'
},
16: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-4 col-2',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-1 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
17: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-2',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-1 col-2',
firetrucks: 'row-2 col-4',
doublerowcabins: 'row-3 col-4'
},
18: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-3 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-1 col-2',
firetrucks: 'row-2 col-4',
doublerowcabins: 'row-2 col-2'
},
19: {
autohydraulic: 'row-1 col-2',
onboardcars: 'row-1 col-1',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
20: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-4 col-1',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-1 col-2',
tugboats: 'row-4 col-2',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
21: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-2 col-1',
sleepcabins: 'row-1 col-4',
dumpers: 'row-2 col-3',
airports: 'row-2 col-4',
trailers: 'row-3 col-3',
cranes: 'row-1 col-2',
tugboats: 'row-1 col-3',
firetrucks: 'row-4 col-3',
doublerowcabins: 'row-4 col-4'
},
22: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-2',
sleepcabins: 'row-4 col-2',
dumpers: 'row-2 col-1',
airports: 'row-2 col-2',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-4 col-3',
firetrucks: 'row-1 col-3',
doublerowcabins: 'row-4 col-4'
},
23: {
autohydraulic: 'row-1 col-1',
onboardcars: 'row-1 col-3',
sleepcabins: 'row-2 col-2',
dumpers: 'row-2 col-1',
airports: 'row-2 col-4',
trailers: 'row-3 col-1',
cranes: 'row-4 col-1',
tugboats: 'row-1 col-2',
firetrucks: 'row-1 col-4',
doublerowcabins: 'row-4 col-4'
}
};
return states[id];
}
/* Установка состояний элементов по конкретному элементу */
function setStatesByItem(coord) {
for (var key in coord) {
if (coord.hasOwnProperty(key)) {
jQuery('#' + key).addClass(coord[key]);
}
}
}
/* Функция, которая выполняется на месте её вызова */
(function (jQuery)
{
/* Прототоп jQuery для уменьшения элементов */
jQuery.fn.elementsToSmall = function () {
this.each(function () {
jQuery(this).removeClass('big');
});
};
/* Прототоп jQuery для увеличения элемента */
jQuery.fn.elementToBig = function () {
jQuery(this).addClass('big');
};
/* Прототоп jQuery для установки позиций элементов */
jQuery.fn.setPosition = function (state) {
jQuery('.box').each(function () {
/* Сбросить текущие координаты по строкам */
jQuery(this).removeClass(function (index, className) {
return (className.match(/(^|\s)row-\S+/g) || []).join(' ');
});
/* Сбросить текущие координаты по столбцам */
jQuery(this).removeClass(function (index, className) {
return (className.match(/(^|\s)col-\S+/g) || []).join(' ');
});
});
/* Получить новые координаты элементов по текущему состоянию */
var coordinates = getStatesByItem(state);
/* Установить новые координаты */
setStatesByItem(coordinates);
};
})(jQuery);
/* Работаем с данными после того, как структура страницы сформирована */
jQuery(document).ready(function () {
/* Текущее состояние по умолчанию */
var state = 1;
/* Обработчики элементам с классом box при наведении */
jQuery('.box').mouseenter(function () {
/* Получить идентификаторы выбранного элемента */
var selectedItem = jQuery(this).attr('id');
/* Получаем состояние в которое необходимо перейти */
state = getTransition(state, selectedItem);
/* Уменьшаем все элементы кроме текущего */
jQuery('.box').not(this).elementsToSmall();
/* Увеличиваем текущий элемент */
jQuery(this).elementToBig();
/* Устанавливаем элементам положение на сетке */
jQuery(this).setPosition(state);
});
});html {
font-size: 62.5%;
font-family: 'Times New Roman';
}
body {
margin: 0;
padding: 0;
border: 0;
font-size: 0;
}
.wrapper {
width: 800px;
margin: 0 auto;
padding: 0;
}
.text {
font-size: 1.8rem;
text-align: center;
}
.center {
margin-left: auto;
margin-right: auto;
}
.containerbox {
background-color: #eeeeee;
width: 800px;
height: 480px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.containerbox .box {
display: table;
width: 198px;
height: 118px;
background-color: #cfe7f5;
border: 1px solid #000000;
font-size: 4rem;
text-align: center;
z-index: 5;
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.containerbox .box.merge-col {
height: 238px;
}
.containerbox .box.col-not {
left: -400px;
}
.containerbox .box.col-1 {
left: 0;
}
.containerbox .box.col-2 {
left: 200px;
}
.containerbox .box.col-3 {
left: 400px;
}
.containerbox .box.col-4 {
left: 600px;
}
.containerbox .box.row-not {
top: -360px;
}
.containerbox .box.row-1 {
top: 0;
}
.containerbox .box.row-2 {
top: 120px;
}
.containerbox .box.row-3 {
top: 240px;
}
.containerbox .box.row-4 {
top: 360px;
}
.containerbox .box.big {
width: 398px;
height: 358px;
background-color: #83caff;
z-index: 10;
}
.containerbox .description {
display: table-cell;
vertical-align: middle;
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/grid.js"></script>
<title>Меню из изображений для сайта</title>
</head>
<body>
<div class="wrapper">
<div class="containerbox">
<div id="autohydraulic" class="box big row-1 col-1">
<span class="description">1</span>
</div>
<div id="onboardcars" class="box row-1 col-3">
<span class="description">2</span>
</div>
<div id="sleepcabins" class="box row-1 col-4">
<span class="description">3</span>
</div>
<div id="dumpers" class="box row-2 col-3">
<span class="description">4</span>
</div>
<div id="airports" class="box merge-col row-2 col-4">
<span class="description">5</span>
</div>
<div id="trailers" class="box row-3 col-3">
<span class="description">6</span>
</div>
<div id="cranes" class="box row-4 col-1">
<span class="description">7</span>
</div>
<div id="tugboats" class="box row-4 col-2">
<span class="description">8</span>
</div>
<div id="firetrucks" class="box row-4 col-3">
<span class="description">9</span>
</div>
<div id="doublerowcabins" class="box row-4 col-4">
<span class="description">10</span>
</div>
</div>
</div>
</body>
</html>- Ways to extend Array object in javascript
- Building bundle for web in vite
- Is there any way to hide the mapbox access token when initializing the map?
- Playwright - sharing state between tests
- How to create a thumbnail after cropping an image with jQuery Cropper
- Validate kendo upload control
- jQuery button click not showing/hiding content
- What's the difference between self and window?
- Small value in doughnut chart is not visible - Chartjs
- How can a function know whether it has been invoked as a constructor (using the `new` keyword)?
- What are the differences between a function expression (`function (…) { … }`) and invoking the Function constructor (`new Function(…)`)?
- Why is it possible for functions to have properties like objects? Are functions also objects?
- console.log timestamps in Chrome
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- Creating a new Date object or using setter methods of javascript Date()
- PHP request to PHP Websocket
- Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript
- Is there some default popup for appstore download on itunes when webapp is viewed in mobile safari?
- Turn off webcam/camera after using getUserMedia
- Show a message if a text is copied successfully(alternative to alert)
- "Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox
- How to get the first Tamil letter in a word?
- handle both mouse and touch events on touch screens
- Truncate number to two decimal places without rounding
- Tailwindcss in webpack configuration not getting applied
- How to access $children for creating Tabs component?
- How to load a gzip compressed javascript without a webserver?
- What's the yield keyword in JavaScript?
- How to get the value of a selected radio button