벽돌이 동적 내용으로 작동하지 않습니다.

벽돌이 내 동적 내용으로 작동하지 않습니다. 왜 그런지 모르겠습니다. 나는 그것이 적어도 몇 시간 동안 코드를 보았고, 작동하지 않는 것을 찾을 수 없다는 것이 적어도 내 측면에서는 버그라고 생각하지 않는다. ... 다음은벽돌이 동적 내용으로 작동하지 않습니다.

나는 내용에 벽돌을 호출하는 자바 스크립트 인라인을 필요로하지 않는다는 것을 알고

<!DOCTYPE html> 
<html> 

    <head> 
     <link rel="stylesheet" type="text/css" href="_css/index.css" /> 
     <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' 
     type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' 
     type='text/css'> 
     <script src="_resources/jquery-2.0.3.min.js" type="text/javascript" language="javascript"></script> 
     <script src="_resources/masonry.pkgd.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
      $('#content').masonry(); 
     </script> 
    </head> 

    <body> 
     <div id="content" class="js-masonry"></div> 
    </body> 

</html>

하지만 내 많은 테스트 중 하나입니다 : 아래

//reads listbox.php and cycles through the array calling createbox 
function listboxs() { 
    $.ajax({ 
     url: '_php/listbox.php', 
     success: function (output) { 

      var jsonArray = $.parseJSON(output); 

      $.each(jsonArray, function (i, box) { 
       createbox(box.id, box.name, box.link, box.description, box.tags); 
      }); 
     } 
    }); 
} 

//create the code for 1 box 
function createbox(id, name, link, description, tags) { 

    var boxHtml = "", 
     tagsHtml = "", 
     descriptionHtml = ""; 

    boxHtml = '' + '<div class="box" id="' + id + '">' + '<div class="boxinfo">' + '<label class="boxname"><a href="' + link + '" class="boxlink" target="_blank">' + name + '</a></label>'; 

    $.each(tags, function (i, tag) { 
     tagsHtml += '<label class="boxtag">' + ((!tag.name) ? tags[i] : tag.name) + '</label>'; 
    }); 

    //if(description.trim().length > 0){ 
    descriptionHtml = '<textarea class="boxdescription" readonly rows="1">' + description + '</textarea>'; 
    //} 

    boxHtml += tagsHtml + '</div>' + descriptionHtml + '</div>'; 

    $content.html($content.html() + boxHtml); 
}

는 간단한 HTML이다 는 CSS의 일부입니다 : 나는 상자에 포장을 만들어 테스트하기 때문에

#content{ 
padding: 15px; 
min-height: 400px; 
} 

/* 
################################ 
box 
*/ 

.box{ 
border: 1px solid black; 
float: left; 
padding: 5px; 
background: #F0F0F0; 
margin-left: 5px; 
margin-bottom: 5px; 
} 

.boxinfo{ 
border-bottom: 1px solid black; 
} 

.boxname{ 
font-weight: bold; 
} 

.boxdescription{ 
border: none; 
outline: none; 
background: white; 
overflow: hidden; 
} 

.boxtag{ 
margin-left: 5px; 
} 

#boxdecoy{ 
height: 45px; 
} 

.boxname, .boxtag, .boxdescription{ 
font-family: 'Rosario', sans-serif; 
font-size: 12px; 
} 

.boxlink{ 
text-decoration: none; 
color: black; 
} 

.boxlink:hover{ 
text-decoration: underline; 
}

은 정말 모두와 미친거야 손으로 (이것은 html로 writting하는 것을 의미합니다) 내용으로, 그리고 만약 내가 벽돌을 잘 작동합니다. 만약 당신이 거기에 보이는 함수를 통해 그들을 만들면 작동하지 않습니다 ... 나는 내 모든 변수를 선언 한 후에 javascript 파일의 시작 부분에 listbox를 호출합니다.

희망은 분명합니다. 도와주세요.

출처

2013-08-27 InquiSab

appended 메서드를 사용해야합니다. docs :

새로 추가 된 항목 요소를 추가하고 배치합니다. "당신은 또한 데이터 벽돌-옵션을 적용해야

= '{:이 jsfiddle

시도

봐는

boxHtml += tagsHtml + 
     '</div>' + 
    descriptionHtml + 
'</div>'; 

var $boxHtml = $(boxHtml); 

$content.append($boxHtml).masonry('appended', $boxHtml);

출처

2013-08-28 08:18:53 Grin

이 작업은 효과가 있지만 벽돌은 실제로 올바르게 적용되지 않는 것 같습니다. div가 올바르게 배치되지 않았고, div가 서로 위에 약간 있습니다. 나는 $ content.masonry()를 액션 클릭에 적용 해 테스트했다. 그리고 버튼을 클릭하면 올바르게 배치된다. 어떤 생각? 또한 listBoxs()의 각주기 다음에 $ content.masonry()를 배치했지만 아무 일도 일어나지 않습니다. 유쾌하게도 단순히 내 페이지를 확대/축소하면 div가 올바르게 배치됩니다. – InquiSab

상자에 이미지가 있습니까? 또는 유니폼 등의 일부 자바 스크립트 변환을 적용 할 수 있습니까? Masonry는 항목 크기에 따라 절대 위치 지정을 사용합니다. 따라서 크기가 약간 변경되면 겹치는 부분이 생깁니다. 자세한 내용은 [여기] (http://masonry.desandro.com/faq.html#overlapping)을 참조하십시오. – Grin

싱긋 웃음의 대답까지 추가로 코드를 변경합니다 columnWidth ": 200,"itemSelector ": :".item "} '을 #container에 보냅니다.

<div id="content" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'></div>

이렇게. 댓글 응답에 도움이 될 수 있습니다. 나는 논평으로 답변 할 담당자를 갖고 있지 않습니다.

출처

2013-08-28 10:03:48 FPJ

그것은 작동하는 것처럼 보였지만, 50을 말하는 너비를 변경하면 여전히 작동하지만 60은 그렇지 않습니다. 벽돌은 정말로 이상하게 행동합니다, 감사합니다. – InquiSab

벽돌이 동적 내용으로 작동하지 않습니다.

답변

관련 문제