벽돌이 jQuery와 정렬되지 않았습니다.

저는 코드 작성법을 배우는 학생입니다.벽돌이 jQuery와 정렬되지 않았습니다.

Masonry 플러그인을 사용하여 블록을 정렬하는 데 문제가 있습니다.

각 블록 (.item)의 높이와 너비가 동일하도록하려고하지만, 백분율을 사용하고 있기 때문에 올바르게 수행하는 방법을 모르겠습니다. 픽셀과 같이 고정 된 값이라면 더 쉬울 것입니다.

나는 jyoure 1.9.1, Masonry by David DeSandro를 사용하고 있습니다. CSS는 meyerweb에서 재설정됩니다.

html로 :

<body> 
    <div class="wrapper"> 
     <div class="gridSizer"></div> 
     <!-- FIRST ROW --> 
     <section class="item" style="background:limeGreen">Everything is 125px in height and width</section> 
     <section class="item" style="background:green">&nbsp;</section> 
     <section class="item" style="background:olive">&nbsp;</section> 
     <section class="item h2" style="background:lime">Only this block is 250px in height (.h2 class), but the aqua coloured box is not being pushed down.</section> 
     <!-- SECOND ROW --> 
     <section class="item" style="background:blue">&nbsp;</section> 
     <section class="item" style="background:navy">&nbsp;</section> 
     <section class="item" style="background:teal">&nbsp;</section> 
     <section class="item" style="background:aqua">&nbsp;</section> 
     <!-- THIRD ROW --> 
     <section class="item" style="background:magenta">&nbsp;</section> 
     <section class="item w2 h2" style="background:hotPink">This block is 250px in height and width (.w2 and .h2 classes)</section> 
     <section class="item" style="background:deepPink">&nbsp;</section> 
     <section class="item w2" style="background:lightCoral">If the width is increased (.w2 class), elements are still pushed</section> 
     <section class="item">No background color assigned to this block</section> 
     <section class="item" style="background:violet">&nbsp;</section> 
    </div> 
</body>

CSS의 :

html, body { 
    min-height: 100%; 
} 
.wrapper { 
    position: relative; 
    margin: 0 auto; 
    width: 500px; 
} 
.wrapper:after { /*clearfix*/ 
    content:' '; 
    display: block; 
    clear: both; 
} 
/* 
* MASONRY STUFF 
*/ 
.gridSizer { 
    width: 25%; 
} 
.item { 
    width: 25%; 
    min-height: 125px; 
} 
.item.w2 { 
    width: 50%; 
}

자바 스크립트/jQuery를 : http://jsfiddle.net/em5cU/

것은 appr겠습니까 : 여기

var $container = $('.wrapper'); 

$container.masonry({ 
    columnWidth: '.gridSizer', 
    itemSelector: '.item' 
}); 
$('.item').css('height', $('.item').width()); 
$('.item.h2').css('height', $('.item').width() * 2);

내 문제와 jsfiddle입니다 내가 얻을 수있는 도움을 eciate. 감사!

출처

2013-08-09 justincys

모든 요소의 크기를 조정 한 후에 석조물을 초기화해야합니다.

var $container = $('.wrapper'); 

//these should come before call to masonry() 
$('.item').css('height', $('.item').width()); 
$('.item.h2').css('height', $('.item').width() * 2); 

$container.masonry({ 
    columnWidth: '.gridSizer', 
    itemSelector: '.item' 
});

이 demo를 참조하십시오

은 당신의 자바 스크립트를 변경

출처

2013-08-09 01:59:43 edsioufi

고마워요! 나는 Masonry가 효과를 얻은 후에 (columnWidth와 itemSelector가 선택된 후에) 요소의 크기를 줄여야한다고 생각했다. – justincys

벽돌이 jQuery와 정렬되지 않았습니다.

답변

관련 문제