Question:
I have a list of images with different dimensions. I wanted the images to be sorted from smallest to largest: the one with the smallest height would come first and the one with the greatest height would come last. Using only jQuery with HTML.
HTML:
<div class="row">
<div class="col-lg-3 parceiros ">
<a href="http://www.sinfar.org.br/?q=listaConv3/1582" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/12082014164535.png" title="CASF" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.sinfar.org.br/?q=listaConv3/1582" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/12082014164559.png" title="SINFAR" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://paf.crfsp.org.br/paf/?cb/benef/Cursos_de_Graduacao_Especializacao_e_Pos-graduacao/841106593608856" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/12082014164626.png" title="PAF" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.unifran.edu.br/site/home/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/12082014164654.jpg" title="UNIFRAN" /></a>
</div>
</div>
<div class="row">
<div class="col-lg-3 parceiros ">
<a href="http://www.ibramrp.com.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014151738.png" title="Instituto Brasileiro de Acumpuntura" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.anfarmag.org.br/home" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014151823.jpg" title="Anfarmag" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.multigene.net.br/portal/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014151856.jpg" title="Multigene" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.faa.edu.br/institucional.php" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152017.png" title="CESVA" /></a>
</div>
</div>
<div class="row">
<div class="col-lg-3 parceiros ">
<a href="http://www.sindicatonutricionistas.com.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152048.jpg" title="SINDICATO DE NUTRIÇÃO" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.abfh.org.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152123.png" title="ABFH" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.lipochemicals.com/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152212.PNG" title="lipo chemicals" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.belezain.com.br/index.php" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152252.png" title="BELEZAIN" /></a>
</div>
</div>
<div class="row">
<div class="col-lg-3 parceiros ">
<a href="http://www.esteticainfoco.org/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152325.png" title="estetica in foco" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="https://www.facebook.com/belezainfocotv" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152420.png" title="beleza in foco tv" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://medicatriz.com.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152459.jpg" title="medicatriz" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.idealterapia.com.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152539.jpg" title="idealterapia" /></a>
</div>
</div>
<div class="row">
<div class="col-lg-3 parceiros ">
<a href="http://www.congressoconsulfarma.com/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152703.png" title="congresso consulfarma" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.consulfarma.com/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152730.png" title="consulfarma" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.unicamp.br/unicamp/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152803.png" title="unicamp" /></a>
</div>
<div class="col-lg-3 parceiros ">
<a href="http://www.grupoinvestiga.com.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152856.png" title="Grupo Investiga" /></a>
</div>
</div>
<div class="row">
<div class="col-lg-3 parceiros ">
<a href="http://www.allergisa.com.br/" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/26082014152924.png" title="Allergisa" /></a>
</div>
</div>
To generate the HTML code I use Web Forms:
<%
var parceiros = bdParceiros.ListarTodos();
int i = 1;
foreach (var parceiro in parceiros)
{
%>
<%if(i==1){ %>
<div class="row">
<%} %>
<div class="col-lg-3 parceiros ">
<a href="<%=parceiro.Link %>" target="_blank">
<img class="well" style="background: none" src="http://ipupo.com.br/arquivos/Parceiro/<%=parceiro.Logo %>" title="<%=parceiro.Nome %>" /></a>
</div>
<%if(i==4){
i=0;%>
</div>
<%}
i++; %>
<%} %>
Answer:
Here's an idea, possibly you could compress the code, but it's practical like this to be noticeable:
// colocar as imagens em cache
var imagens = $('img').get();
var row = $('.row');
// criar uma array de objetos, com a altura e o elemento que envolve cada imagem
var alturas = imagens.map(function (el) {
var altura = el.getBoundingClientRect().height;
return {
altura: altura,
elemento: $(el).closest('.col-lg-3')
};
});
// arrumar a array de objetos por alturas
alturas = alturas.sort(function (a, b) {
return a.altura - b.altura;
});
// apagar o conteudo original (atênção a possiveis event handlers)
row.html('');
// restaurar o conteudo, agora na ordem certa
$(alturas).each(function () {
console.log(this.altura); // só para verificação
$('.row').append(this.elemento);
});
As @bfavaretto indicated in the comments below, remember that this code must only run after the images are loaded, otherwise the height calculation will not work.