Sort images by height of each one

Asked

Viewed 140 times

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 the minor was first and the height longer 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++; %>
            <%} %>

Jsfiddle

javascript c# jquery html

  • Ok, but your problem is not in HTML. Post the code that cannot sort the images.

  • @user6492, I don’t even know how to start, I don’t know if it’s possible.

3 answers

5


Here’s an idea, possibly 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 only run after the images are loaded, otherwise the height calculation will not work.

Example: http://jsfiddle.net/mkm25zb4/

  • 1

    All you need to do is make sure that it runs after loading all the images (for example, in window.onload).

  • I just don’t understand why you added the same images over and over again.

  • @bfavaretto good observation- I added this detail.

  • @Sergio, in HTML there are 21 images, after running its code it replicates, it turns over 60. The images appear about 3 times each.

  • @Diegozanardo, is that how you want it? http://jsfiddle.net/mkm25zb4/1/ - each .row with the sorted images inside you?

  • @Sergio, in reality is to have an ordering of the images, just like your answer. So that the bootstrap does not lose alignment, it is necessary that every 4 images is contained in a line.

  • @Sergio, but I don’t think it fits this question. You can adjust it here. Thank you.

Show 2 more comments

3

You have available, via Jquery, the function sort(). A possible solution would be the following:

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

After ordering, you can modify the original list:

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

See here the example in Jsfiddle.

  • Well put, I used the .sort() native to javascript, you used jQuery, which actually allows you to re-position the elements. +1

  • @Sergio thank you - anyway, it’s always interesting to know how Libraries like Jquery manipulate DOM elements. In this case, your post is more complete.

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.

Browser other questions tagged javascript c# jquery html

You are not signed in. Login or sign up in order to post.