Sort images by the height of each

Question

Sort images by the height of each

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (1 votes)

3

I have a list of images with different dimensions. I wanted the images to be sorted from the smallest to the largest: the one that has height smaller was in the first and the height greater was 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 HTML 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++; %>
            <%} %>

JSFiddle

javascript html jquery c#

asked by anonymous 02.09.2014 / 19:48

3 answers

3

You have the function sort() available via JQuery. One possible solution would be as follows:

$lista = $('div.row div.parceiros').sort(function (itm1, itm2) { 
    return $('.well',itm1).height() > $('.well',itm2).height();
});

After sorting, you can modify the original list:

$('div.row').append($lista);

See the example in JSFiddle here.

02.09.2014 / 21:00

1

$(function () {
var alturas = new Array();

var _height = 0;

$(".parceiros img").each(
    function () {
        alturas[$(this).height()] = $(this).height();
    }
);

alturas.sort(function (a, b) {
    return a - b
});

var _height = 0;
var print = "";
var j = 0;
$.each(alturas, function (index, value) {
    $(".parceiros").each(
        function () {
            if ($("img", this).height() == value) {
                if (j % 4 == 0) {
                    print += "<div class='row'>";
                }
                print += $(this)[0].outerHTML;
                if (j % 4 == 0) {
                    print += "</div>";
                }
                j++;
            }
        });
});

$("body").html(print);
});

This is a possible solution.

02.09.2014 / 21:00

JavaScript Factoring How to create random audio playlist?

score 5 · Accepted Answer

Here's an idea, maybe it would be to compress the code, but it's practical to be perceptible:

// 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 should run only after the images are loaded, otherwise the calculation of heights will not work.

Sort images by the height of each

3 answers

Example: link