Форум

dima-kruglyak · #1 (**permalink**) 22.05.2017, 13:13

Подскажите плиз. как узнать высоту каждого блока

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        var h = $('.post').css('height');
        $('.post').css('height', h);
    });
</script>
</head>

<body>
  <div>
    <div class="post">1</div>
    <div class="post">2<br/></div>
    <div class="post">3<br/>3</div>
  </div>
</body>
</html>

сейчас высота определяется только первого и подставляется во все остальные.

рони · #2 (**permalink**) 22.05.2017, 13:39

dima-kruglyak,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
  .post{
    border: solid hsla(240, 100%, 50%, 1) 2px;
  }

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        var p = $('.post'), max = 0, h;
        p.each(function(indx, el){
             (h = $(el).height()) >  max &&  (max = h);
              });
        p.css({'height': max});
    });
</script>
</head>

<body>
  <div>
    <div class="post">1</div>
    <div class="post">2<br/></div>
    <div class="post">3<br/>3</div>
  </div>
</body>
</html>

dima-kruglyak · #3 (**permalink**) 22.05.2017, 13:48

Спасибо. Но здесь высота берется максимальная и подставляется во все блоки, а можно чтобы высота каждого блока была своя? (Первый блок высота 18px ... третий 36px)

рони · #4 (**permalink**) 22.05.2017, 13:57

dima-kruglyak,
зачем??? если вам требуется сделать масло масляным, вы что-то не договариваите.

рони · #5 (**permalink**) 22.05.2017, 14:07

dima-kruglyak,
возможно вы хотели так ...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
  .post{
    border: solid hsla(240, 100%, 50%, 1) 2px;
    height: 3px;
  }

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        var p = $('.post');
        p.each(function(indx, el){
            el.style.height = el.scrollHeight + 'px';
              });

    });
</script>
</head>

<body>
  <div>
    <div class="post">1</div>
    <div class="post">2<br/></div>
    <div class="post">3<br/>3</div>
  </div>
</body>
</html>

ruslan_mart · #6 (**permalink**) 22.05.2017, 16:02

<div class="post">Height is 100px</div>
<div class="post">Height is 200px</div>
<div class="post">Height is 50%</div>
<div class="post">Height is 2em</div>
<div class="post">Height is auto</div>

var heights = [100, '200px', '50%', '2em', 'auto'];

$('.post').each(function(index) {
    var value = heights[index];
    this.style.height = +value ? value + 'px' : value;
});

dima-kruglyak · #7 (**permalink**) 22.05.2017, 23:38

Да. Вы правы. Игрался с masonry.js и блоки друг на друга налезали, думал есть прописать высоту блока, все заработает. Оказалось не, проблема была в изображениях, не успевали грузиться.

j0hnik · #8 (**permalink**) 23.05.2017, 00:37

Попробуй так.

$(window).on("load", function() {
 $('selector').masonry();
});

Должно успеть

Форум

Справочник

Discord чат

Курсы javascript