Saya mencoba membuat Equalizer HTML/JQuery yang sangat sederhana. Masalah yang tidak dapat saya perbaiki adalah, menyelaraskan bilah ke bawah dan memperluas ke atas.

Ini Kode saya:

window.setInterval(function(){
  $('.eqitem').each(function(){
    $(this).height(Math.floor(Math.random() * 250) + 50 );
  });
}, 500);
.parent{
    height: 300px;
}

.eqitem{
    float: left;
    height: 0px;
    width: 10px;
    background: darkred;
    margin-right: 5px;
    -webkit-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div id="eq">
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>                    
    </div>
</div>

Saya mencoba perataan vertikal, pemosisian absolut dan relatif, atribut bawah, ... Tidak ada hal di atas yang berfungsi atau bahkan menyebabkan masalah yang tidak diinginkan.

Terima kasih banyak untuk membantu.

4
Elefant793 10 Agustus 2017, 23:42

2 jawaban

Jawaban Terbaik

Anda perlu mencampur posisi relatif dan absolut untuk memposisikan item di bagian bawah wadah yang diposisikan relatif.

Untuk mencapai apa yang Anda inginkan, Anda memerlukan sesuatu seperti js ini:

var offset_width = 15;
var i = 0;
$('.eqitem').each(function(){
    $(this).css('left', (i*offset_width) + 'px');
  i++;
});  

Dan css ini:

   #eq {
      position:relative;
    display: block;
    height: 300px;
    width: 100px;
     }
    .eqitem{
        position:absolute;
        height: 0px;
        width: 10px;
        background: darkred;
        margin-right: 5px;
        -webkit-transition: height 0.5s ease-out;
        transition: height 0.5s ease-out;
        display:inline-block;

        bottom:0;
    }

Silakan lihat biola di sini: https://jsfiddle.net/catbadger/pzy15m8e/1/

3
catbadger 10 Agustus 2017, 21:04

Anda dapat mencapai ini dengan cara yang sederhana dan elegan menggunakan yang berikut ini -

#eq{
  display : flex;
  height: 300px;
}

.eqitem{
   display: inline-block;
  align-self: flex-end;
}

Lihat Fiddle
Lihat Kompatibilitas Peramban

3
Vandesh 10 Agustus 2017, 21:21