Определение высоты блока
Подскажите плиз. как узнать высоту каждого блока
<!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>
сейчас высота определяется только первого и подставляется во все остальные. |
блоки одинаковой высоты на jquery
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>
|
Спасибо. Но здесь высота берется максимальная и подставляется во все блоки, а можно чтобы высота каждого блока была своя? (Первый блок высота 18px ... третий 36px)
|
dima-kruglyak,
зачем??? если вам требуется сделать масло масляным, вы что-то не договариваите. |
высота блока по содержимому
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>
|
<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;
});
|
Да. Вы правы. Игрался с masonry.js и блоки друг на друга налезали, думал есть прописать высоту блока, все заработает. Оказалось не, проблема была в изображениях, не успевали грузиться.
|
Попробуй так.
$(window).on("load", function() {
$('selector').masonry();
});
Должно успеть |
| Часовой пояс GMT +3, время: 02:30. |