Develop Reference

loop through elements and set CSS styling at same time

So I want to loop through elements with a class and then loop the individual element and gradually decrease the "left" css property.
let move = document.getElementsByClassName("move");
for (var i = 0; i < move.length; i++) {
const left = move[i].getBoundingClientRect().left;
const elementId = move[i].id;
for (let j = left; j > -20; j--) {
document.getElementById(elementId).style.left = j + "%";
await new Promise(resolve => setTimeout(resolve, 20));
}
}
However, I'm using "await" to delay so that it moves slowly and doesn't zip across the screen. I want it so that all the elements have their CSS left property decrease at the same time. But instead, because of the await, the first element increases its left property and when its left property reaches the end, only then the next element goes. Please advise

While I think it would be better to use pure CSS transitions/animations for this, you could use a while loop to iterate over the elements with the move class, subtracting 1% from their left value until they are completely off screen (right <= 0).
const start = async () => {
const move = document.getElementsByClassName("move");
const canMoveLeft = () => {
const move = document.getElementsByClassName("move");
for (let i = 0; i < move.length; i++) {
if (move[i].getBoundingClientRect().right > 0) return true;
}
return false;
};
while (canMoveLeft()) {
for (let i = 0; i < move.length; i++) {
const { left, right } = move[i].getBoundingClientRect();
if (right > 0) {
const windowWidth = window.innerWidth;
const leftVal = `${Math.round((left / windowWidth) * 100) - 1}%`;
document.getElementById(move[i].id).style.left = leftVal;
}
}
await new Promise((resolve) => setTimeout(resolve, 20));
}
};

From what I understood, you want to animate left property of elements with class "move".
If that's the case you can do:
1st:
add transition property in move class
.move {
transition: left 2s;
}
2nd:
let move = document.getElementsByClassName("move");
for(let item of move) {
item.style.left = "-20%";
}

Why is the ForEach only registering the first element from the array?

Goal
I'm trying to limit the height of each Award Category to the total height of 3 award divs. The reason for this is that it is dynamic and the height may vary depending on what the user puts in for the award info.
Link to CodePen for more context: https://codepen.io/Kaleshe/pen/QWpdJQq
Problem
For some reason, only the first element is being registered and I can't put my finger on why.
According to the error the next item in the loop is undefined, but it is picked up if I console log it outside of the loop like this awardCatContainers[0].querySelectorAll('.award')
Code
const awardCatContainers = document.querySelectorAll( '.award-category-container' );
const button = document.querySelector( '.award .button' );
awardCatContainers.forEach( (container) => {
let awards = container.querySelectorAll( '.award' );
let height = getContainerHeight(awards);
container.style.maxHeight = height + 'px';
});
function getContainerHeight(containerChildren) {
let height = 0;
for ( let a = 0; a <= 3; a++ ) {
height += containerChildren[a].offsetHeight;
}
return height;
}
Edit/Resolution
After looking at the solution provided by H. Udara I was able to confirm that my method worked. Leading me to do further debugging.
I then realised that the error was due to there not being a check for if a category has 3 or less awards. After adding in this check and a const to specify the max elements each category should show, the code now works.
const containers = document.querySelectorAll( '.award-category-container' );
const maxElems = 4;
for ( let c = 0; c < containers.length; c++) {
let awards = containers[c].querySelectorAll( '.award' );
if ( awards.length >= maxElems ) {
let height = setContainerHeight(awards);
containers[c].style.maxHeight = height + 'px';
}
}
// Takes an array of children and uses the total offsetHeight of the first 3 elements to create a height
function setContainerHeight(containerChildren) {
let height = 0;
for ( let a = 0; a < maxElems; a++ ) {
height += containerChildren[a].offsetHeight;
}
return height;
}

The querySelector returns a static NodeList. So when this code is run, probably only one element is rendered in the page. What you can try doing is adding a timeout to this code. This will help you debug the issue.
But do not make this your final code. Because you can never be certain of the timeout period. If the network is too slow it could take well over 3 seconds to load the elements. Look into promises or callbacks and implement your final code. If you are making AJAX calls to get data before creating the elements, use the callback provided by AJAX to determine if the AJAX call is complete.
const awardCatContainers = document.querySelectorAll( '.award-category-container' );
const button = document.querySelector( '.award .button' );
// set a timeout
setTimeout(() => {awardCatContainers.forEach( (container) => {
let awards = container.querySelectorAll( '.award' );
let height = getContainerHeight(awards);
container.style.maxHeight = height + 'px';
})}, 3000);
function getContainerHeight(containerChildren) {
let height = 0;
for ( let a = 0; a <= 3; a++ ) {
height += containerChildren[a].offsetHeight;
}
return height;
}

You need to loop the awards and apply the styling:
awardCatContainers.forEach( (container) => {
let awards = container.querySelectorAll( '.award' );
let height = getContainerHeight(awards);
//container.style.maxHeight = height + 'px';
for (let award of awards) award.style.maxHeight = height + 'px';
});
It's possible that I misunderstood your problem, in which case you will need to provide more information.
getContainerHeight is also strange, you go from 0 to 3. It would help a lot in understanding your exact intention if I knew what your structure is.

What is wrong with my merge sort visualization?

I am trying to create a merge sort visualizer.
The merge sort works in the sense that if I give it an array, it'll spit back a correctly sorted array. The problem is that the "visualization" aspect of my program isn't quite working as I thought it would.
The way I attempted the implementation was that mergeSort() would take the two elements being compared, highlight them in red (no longer focusing on this for now to simplify problem), then swap the height if necessary, then turn the two elements back to the default colour:
const {
useState,
useEffect
} = React;
const numberOfBars = 8; //Number of bars shown on screen
const animationSpeed = 100; //How fast the bars animate
function SortingVisualizer() {
const [arr, setArr] = useState([]);
useEffect(() => {
newArray();
}, [])
function newArray() {
const tempArr = [];
for (let i = 0; i < numberOfBars; i++) {
tempArr.push(Math.floor(Math.random() * 100) + 5)
}
setArr(tempArr);
}
return (
<div id = "main-container" >
<button id = "new-array-button" onClick = {() => newArray()}> New Array </button>
<button id = "merge-sort-button" onClick = {() => mergeSort(arr)}> Merge Sort < /button>
<div id = "bar-container" >
{
arr.map((value, index) => (
<div className = 'bar'
key = {
index
}
style = {
{
backgroundColor: "aquamarine",
height: value + "px"
}
}
/>
))
}
</div>
</div >
)
}
// Recursively breaks down unsortedArray into lowIndex, midIndex, highIndex and pass to mergeSortHelper()
// Initialized aux, lowIndex and highIndex in argument.
function mergeSort(unsortedArray, aux = [...unsortedArray], lowIndex = 0, highIndex = unsortedArray.length - 1) {
// Base case
if (highIndex === lowIndex) return;
// Get midIndex
const midIndex = Math.floor((highIndex + lowIndex) / 2);
// Recursively run left side and right side until base case reached.
mergeSort(unsortedArray, aux, lowIndex, midIndex);
mergeSort(unsortedArray, aux, midIndex + 1, highIndex);
// Merge the left sides and right sides
mergeSortHelper(unsortedArray, aux, lowIndex, midIndex, highIndex);
}
// Does the work of sorting list and animating the height swap
function mergeSortHelper(unsortedArray, aux, lowIndex, midIndex, highIndex) {
let auxkey = lowIndex;
let i = lowIndex;
let j = midIndex + 1;
let barI = undefined;
let barJ = undefined;
// While there are elements in left/right sides, put element in auxillary array
// then increment the indexes by 1.
while (i <= midIndex && j <= highIndex) {
let arrayBars = document.getElementsByClassName('bar');
barI = arrayBars[i].style;
barJ = arrayBars[j].style;
if (unsortedArray[i] <= unsortedArray[j]) {
aux[auxkey] = unsortedArray[i];
auxkey++;
i++;
} else {
let tmpHeight = barJ.height; //swaps value at index i and j
barJ.height = barI.height; //swaps value at index i and j
barI.height = tmpHeight; //swaps value at index i and j
aux[auxkey] = unsortedArray[j];
auxkey++;
j++;
}
}
// Move any remaining elements from unsortedArray into auxillary array.
while (i <= midIndex) {
aux[auxkey] = unsortedArray[i];
auxkey++;
i++;
}
// Copy the auxillary array to the unsortedArray so that in the next iteration, the unsortedArray will reflect the new array
for (let k = 0; k <= highIndex; k++) {
unsortedArray[k] = aux[k];
}
}
ReactDOM.render( < SortingVisualizer / > , document.querySelector("#app"))
#new-array-button {
position: absolute;
}
#merge-sort-button {
position: absolute;
left: 100px;
}
#bar-container {
align-items: flex-end;
background-color: lightgray;
display: flex;
height: 200px;
justify-content: center;
}
.bar {
margin: 0 2px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
I've been trying to implement the color change and height swap in different parts of my program but it never seems to work correctly. Where am I going wrong with the visualization?
Removed my jsfiddle link from the question as I am using the on-site code snippet now. But in case anyone still wants it, it's here: https://jsfiddle.net/SushiCode/k0954yep/17/

Making a conditional function more efficient

I want to make a function that modifies a variable based on the given argument.
The function checks a variable and the number in that string. Then via the argument, I specify either increase or decrease the number by 1 (++1).
There is an array as well, that if the number is equal to the length of the array, then it turns to 1 and if the number is less than 1 then it is equal the size of the array. This is to make sure the number of the string does not get less than 1 or more than the length of the array.
the string with the number is Music1. So the circle would be like:
...., Music1, Music2, Music3, Music4, Music1, Music2, Music3, ....
var MyArray = ["Music1", "Music2", "Music3", "Music4"];
var currentMusic = "Music1";
$(".increase").on('click tap', nextMusic);
$(".decrease").on('click tap', previousMusic);
function nextMusic() {
unaryChange('plus')
}
function previousMusic() {
unaryChange('minus')
}
function unaryChange(operation) {
if (currentMusic === "Music4") {
currentMusic = "Music1"
} else if (currentMusic === "Music0") {
currentMusic = "Music4"
}
if (operation === "plus") {
currentMusic = currentMusic.replace(/\d+$/, function(n) {
return ++n
});
} else {
currentMusic = currentMusic.replace(/\d+$/, function(n) {
return --n
});
}
console.log(currentMusic);
$(".text").text(currentMusic);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="increase">increase</button>
<button class="decrease">decrease</button>
<p class="text">value</p>
The above method almost does the job, however I am looking for an easier and more professional solution. It does not look efficient. For example, there must be a better way to specify the argument operation instead of a string like plus, or the conditions.
I need this function to be rewritten in a better way, more professionally and works as described.
Thanks in advance.

It is better to work with array index instead of the values
function unaryChange(operation) {
var currentIndex = MyArray.findIndex(function(item) {
return item === currentMusic;
});
if(operation === 'plus') {
newIndex = currentIndex < MyArray.length - 1 && currentIndex + 1 || 0;
} else {
newIndex = currentIndex > 0 ? currentIndex -1 : MyArray.length -1;
}
currentMusic = MyArray[newIndex]
$(".text").text(currentMusic);
}
In this case whatever the size of the array it will work.
A working example https://jsbin.com/rahomorupa/4/edit?html,js,console,output

Building on Joe's answer I'd suggest you define constants for plus and minus as +1 and -1 respectively to simplify the increment/decrement logic, along with the modulus operator to handle the array wrap-around:
const PLUS = 1;
const MINUS = -1;
function unaryChange(operation) {
var currentIndex = MyArray.findIndex(function(item) {
return item === currentMusic;
});
// If it's invoked as unaryChange(PLUS) or unaryChange(MINUS)
// we don't need any conditional logic to handle the increment,
// and with the % operator we don't need additional bounds overflow
// logic. (This latter bit is complicated somewhat by the need to
// handle a minus step from index 0.)
const {length} = MyArray;
const newIndex = ((currentIndex + operation) % length + length) % length;
currentMusic = MyArray[newIndex]
$(".text").text(currentMusic);
}
The % operator returns the remainder of a division, which conveniently loops back around to 0 when used with an array index against the array length:
const array = ['first', 'second', 'third'];
for (let i = 0; i < 20; i++) {
console.log(array[i % array.length]);
}

You can pass a Boolean for plus, use an arrow function, and a ternary operator:
var MyArray = ["Music1", "Music2", "Music3", "Music4"];
var currentMusic = "Music1";
$(".increase").on('click tap', nextMusic);
$(".decrease").on('click tap', previousMusic);
function nextMusic() {
unaryChange(true)
}
function previousMusic() {
unaryChange(false)
}
function unaryChange(plus) {
currentMusic = currentMusic == "Music4" ? "Music1" : (currentMusic == "Music0" ? "Music4" : currentMusic);
currentMusic = currentMusic.replace(/\d+$/, n => plus ? ++n : --n);
console.log(currentMusic);
$(".text").text(currentMusic);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="increase">increase</button>
<button class="decrease">decrease</button>
<p class="text">value</p>

Since you have an array of music, it's better to use that instead. There's no need to operate from the text, you just need to update the array index to the next value and pass it to the function, and let it get the song name directly.
Since we want to be between the boundaries of 0 and the array length, here's what is used to do this:
Get the next song: (currentTrackIndex + 1) % tracks.length. That will get the next index value and apply modulo to it so it will round back if it exceedes the array length.
Get the previous song: (currentTrackIndex - 1 + tracks.length) % tracks.length. It's pretty much the same as getting the next song, save for the case when the index it's already at zero. If you apply modulo to a negative number, you will get a negative result and will mess up your array index. So instead of using a conditional clause ("if (currentTrackIndex === 0 ...)"), let's add the array length. Why? Because since 0 % n == 0 and n % n == 0, adding the array length will not change the modulo result, while keeping your index as a positive number.
(I changed the name from MyArray to tracks and unaryChange to changeTrack, to give it better meaning clarity)
var tracks = ["Music1", "Music2", "Music3", "Music4"];
var currentTrackIndex = 0;
$(".increase").on('click tap', nextMusic);
$(".decrease").on('click tap', previousMusic);
function nextMusic() {
//It will move to the next track. If it's over the array length, it will reset to 0
changeTrack((currentTrackIndex + 1) % tracks.length)
}
function previousMusic() {
//It will move to the previous song. If it's below zero, it will reset to the last track index
changeTrack((currentTrackIndex + tracks.length - 1) % tracks.length)
}
function changeTrack(newTrackIndex) {
currentTrackIndex = newTrackIndex;
var currentTrack = tracks[currentTrackIndex];
console.log(currentTrackIndex);
$(".text").text(currentTrack);
}

Here's how I'd do it. Since it seems that the word Music is just a prefix used to designate a particular unit, I wont store it over and over again in a array.
As for jQuery? Yeah, nah.
"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
let prefix = 'Music';
let count = 4, index=0;
byId('increase').addEventListener('click', function(evt){index++; index %= count; update();}, false);
byId('decrease').addEventListener('click', function(evt){index--; if (index<0) index=count-1; update();}, false);
function update()
{
byId('status').textContent = `${prefix}${index+1}`;
}
}
<span id='status'>Music1</span><br>
<button id='increase'>+</button><button id='decrease'>-</button>

I think this is a good start. Accessing the indices of the array versus the values feels a lot cleaner. Using ternaries cleans up a lot of logic into one line as well.
var MyArray = ["Music1", "Music2", "Music3", "Music4"];
var currentMusic = 0;
$(".increase").on('click tap', unaryChange);
$(".decrease").on('click tap', unaryChange);
function unaryChange() {
if (event.target.className === "increase") {
currentMusic = (currentMusic < 3 ? currentMusic + 1 : 0)
} else {
currentMusic = (currentMusic > 0 ? currentMusic -= 1 : 3)
}
console.log(MyArray[currentMusic]);
$(".text").text(MyArray[currentMusic]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="increase">increase</button>
<button class="decrease">decrease</button>
<p class="text">value</p>

Balancing height in column-count CSS columns that contain only images

I'm trying to balance the height between the columns in an image gallery I've made with the following code:
section {
background: magenta;
/* So you can see the area I don't want to appear */
}
.gallery {
width: 100%;
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-moz-column-count: 2;
-moz-column-gap: 0;
column-count: 2;
column-gap: 0;
}
<section class="gallery">
<div>
<img src="http://lorempixel.com/800/1000/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/200/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
<div>
<img src="http://lorempixel.com/800/900/">
</div>
<div>
<img src="http://lorempixel.com/800/400/">
</div>
<div>
<img src="http://lorempixel.com/800/200/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/550/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
<div>
<img src="http://lorempixel.com/800/600/">
</div>
<div>
<img src="http://lorempixel.com/800/1000/">
</div>
<div>
<img src="http://lorempixel.com/800/700/">
</div>
</section>
Here's a JSFiddle: https://jsfiddle.net/auan2xnj/1/
The images all have different heights but all have the same width. My column-fill is set to balance (as by default).
The problem:
In the JSFiddle, it looks pretty good, but on the website I'm developing, some enormous gaps have appeared comparing the height of the columns. I'm guessing this is because of the orders the images have in the HTML, considering that's the exact same order they'll be put in the columns by the CSS. This is a screenshot from my project, using exactly the same code from the JSFiddle:
Behaviour:
When I give the .gallery element a hardcoded height value, the columns always balance much better. This is a problem because in my website, images are added dynamically and I'm never going to know the exact height of all the galleries.
Request:
I would like to find a piece of code (whatever it is, I think I can implement some JS) that fixes this issue, either by reordering the images in the HTML so that the outcome is the best possible, or whatever way there is in order to set a height dynamically so that the problem is solved.

EDIT:
If you don't need to keep line-height: 0 you would simply use .gallery img {display:block} and remove line-height, it's all you need. That would be the best. table-cell and so on can have some side-effects. For example vertical-align: middle leave a space under the images, and is just a hack.
https://jsfiddle.net/bruLwktv/
Challange accepted, here is the solution: ;)
The algorithm makes sure every images is loaded and then partition them into both coloumns in a way the have about the closest total height possible to create a minimal gap.
Using The greedy algorithm for the Partition problem to create Balanced partitions.
var gallery = document.getElementsByClassName("gallery")[0]
var images = gallery.getElementsByTagName("img")
var notLoaded = 0
window.onload = function() {
for (var i = images.length; i--;) {
if (images[i].width == 0) {
// let the image tell us when its loaded
notLoaded++
images[i].onload = function() {
if (--notLoaded == 0) {
allImgLoaded()
}
}
}
}
// check if all images are already loaded
if (notLoaded == 0) allImgLoaded()
}
function allImgLoaded() {
// Partition images
var imgs = partitionImages(images)
// reorder DOM
for (var i = images.length; i--;) {
gallery.appendChild(imgs[i])
}
}
function partitionImages(images) {
var groupA = [], totalA = 0
var groupB = [], totalB = 0
// new array width img and height
var imgs = []
for (var i = images.length; i--;) {
imgs.push([images[i], images[i].height])
}
// sort asc
imgs.sort(function(a, b) {
return b[1] - a[1]
});
// reverse loop
for (var i = imgs.length; i--;) {
if (totalA < totalB) {
groupA.push(imgs[i][0])
totalA += imgs[i][1]
} else {
groupB.push(imgs[i][0])
totalB += imgs[i][1]
}
}
return groupA.concat(groupB)
}
section {
background: magenta;
/* So you can see the area I don't want to appear */
}
.gallery {
width: 100%;
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-moz-column-count: 2;
-moz-column-gap: 0;
column-count: 2;
column-gap: 0;
}
<section class="gallery">
<div><img src="http://lorempixel.com/800/1000/"></div>
<div><img src="http://lorempixel.com/800/600/"></div>
<div><img src="http://lorempixel.com/800/200/"></div>
<div><img src="http://lorempixel.com/800/700/"></div>
<div><img src="http://lorempixel.com/800/900/"></div>
<div><img src="http://lorempixel.com/800/400/"></div>
<div><img src="http://lorempixel.com/800/200/"></div>
<div><img src="http://lorempixel.com/800/600/"></div>
<div><img src="http://lorempixel.com/800/700/"></div>
<div><img src="http://lorempixel.com/800/600/"></div>
<div><img src="http://lorempixel.com/800/550/"></div>
<div><img src="http://lorempixel.com/800/700/"></div>
<div><img src="http://lorempixel.com/800/600/"></div>
<div><img src="http://lorempixel.com/800/1000/"></div>
<div><img src="http://lorempixel.com/800/700/"></div>
</section>

Yeah, column implementation is bizarre right now.
If you get rid of "line-height: 0;" this problem becomes much less severe. I have no idea why. Except to say that the line-height thing is a hack to get rid of that omnipresent little space/margin at the bottom of images (remove the line-spacing rule in the jfiddle if you don't know what I'm talking about).
Supposedly that space/margin is there because HTML doesn't know an img element isn't text and so leaves room for the "tails" of characters like "y" and "g" which go below the line. This is a ridiculous bug which I think should've been fixed a decade ago. To me, this is up there with IE<9 levels of stupid implementation.
Anyway, rant over, a way to fix that space/margin without using the line-height hack:
img {
vertical-align: middle;
}
Also, it's not an issue if you're positive all your images will be the same width, but in the fiddle the gap problem is made worse by images overlapping the widths of the columns. You should set
img {
width: 100%
// and, for insurance, I also add:
height: auto;
}
to make sure you're fitting the images into the columns.

I've added some CSS to the <div> elements, let me know if this works:
https://jsfiddle.net/rplittle/auan2xnj/3/
I've also seen this:
div {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
(adjust/add prefixes if necessary)
Or you could try Masonry, it's well-built and pretty easy to set up.

Request:
I would like to find a piece of code (whatever it is, I think I can implement >> some JS) that fixes this issue, either by reordering the images in the HTML so >> that the outcome is the best possible, or whatever way there is in order to set a height dynamically so that the problem is solved.
the greedy algorithm is a nice approach, and useful for streams, where you have to dynamically extend the tiles. (like pagination)
I've included a function that does a better balancing by grouping the items and switching items between the groups.
The columns here are implemented by creating 2 divs that are inline-block and 50% width; simple and works across all modern browsers.
function balance(numGroups, items, fetchValue){
function delta(a, b){
var da = a-avg, db = b-avg;
return da*da + db*db;
}
function testAndSwitchItems(a,b){
var valueA, valueB,
lengthA = a.length, lengthB = b.length,
indexA = lengthA, indexB = lengthB,
bestDelta = delta(a.sum, b.sum);
//test every item in this first column against every value in the second column
for(var i = 0; i <= lengthA; ++i){
//accessing a not available index of an Array may deoptimize this function
//that's why i check the index before accessing the element.
valueA = (i < lengthA && a[i] || nullElement).value;
for(var j = 0; j <= lengthB; ++j){
valueB = (j < lengthB && b[j] || nullElement).value;
//test wether it would be an improvement to switch these items
var d = delta(
a.sum + valueB - valueA,
b.sum + valueA - valueB
);
//find the best combination
if(d < bestDelta){
indexA = i;
indexB = j;
bestDelta = d;
}
}
}
var elmA = indexA < lengthA && a[indexA],
elmB = indexB < lengthB && b[indexB],
tmp;
if(elmA && elmB){
//switch items
a[indexA] = elmB;
b[indexB] = elmA;
}else if(elmA){
//move an item from a to b
b.push(elmA);
tmp = a.pop()
if(elmA !== tmp)
a[indexA] = tmp;
}else if(elmB){
//move an item from b to a
a.push(elmB);
tmp = b.pop()
if(elmB !== tmp)
b[indexB] = tmp;
}else{
//no switch would improve the result
return false;
}
//compute the new sums per group
valueA = (elmA || nullElement).value;
valueB = (elmB || nullElement).value;
a.sum += valueB - valueA;
b.sum += valueA - valueB;
return true;
}
function initGroupsAndReturnSum(sum, item, i){
var value = fetchValue? fetchValue(item): item;
//distribute the items
if(i<numGroups){
var group = groups[i] = [];
group.sum = value;
}else{
group = groups[ i%numGroups ];
group.sum += value;
}
group.push({
index: i,
value: value
});
return sum + value;
}
var groups = [],
nullElement = { value: 0 },
//don't care wether items is an Array, a nodeList or a jQuery-object/list, ...
avg = groups.reduce.call(items, initGroupsAndReturnSum, 0) / groups.length;
//start switching items between the groups
do {
for(var i=1, done = true; i<groups.length; ++i)
for(var j=0; j<i; ++j)
//test each combination of groups
if(testAndSwitchItems(groups[j], groups[i])){
//this switch may have affected the computation against other groups
//do another loop
done = false;
}
}while(!done);
function sorter(a,b){
return a.index - b.index
}
function getItem(item){
return items[item.index]
}
return groups.map(function(a){
return a.sort(sorter).map(getItem)
});
}
and a possible way to use it
var groups = balance(2, //num columns
//something Arraylike that contains some objects to be grouped
document.querySelectorAll('img'),
//a function to compute a value out of an Array-item
img => img.naturalHeight / img.naturalWidth
);
https://jsfiddle.net/77o3ptk2/2/
Just for the sake of it, the example also includes a few more styles like a padding around the images and an enumeration, to show how much the array has been shuffled.

You can equalize height of each column using this http://brm.io/jquery-match-height/ . And its also good in mobile responsive. No need for css, just add the library and put this snippet
$(function() {
$('.gallery').find('div').matchHeight(options);
});