공식 문서 에 따르면 석조 컨테이너를 초기화하는 여러 가지 방법이 있습니다. HTML 초기화는 잘 작동하지만 매개 변수를 data-masonry 속성에서 JQuery로 이동하려고하면 문제가 발생합니다.
다음은 JSON 매개 변수를 사용한 HTML 초기화입니다.
<div id="container" class="masonry js-masonry" data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item", "isFitWidth": true }'>
그리고 이것은 현재 js / JQuery 파일로 옮길 때의 모습입니다.
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
isFitWidth: true
});
후자의 버전을 사용하면 grid-sizer 요소가 표시되지만 표시되지 않아야합니다.
공식 문서에는 JQuery에서 초기화 코드를 호출해야하는시기에 대한 사양이 없습니다. 내가 이것을 부를 수있는 $ (document) .ready입니까?
레이아웃이 깨진 JSFIDDLE : http://jsfiddle.net/1f1kwfbd/10/
공식 문서에는 JQuery에서 초기화 코드를 호출해야하는시기에 대한 사양이 없습니다. 내가 이것을 부를 수있는 $ (document) .ready인가?
그래서 원할 때마다 이것을 부를 수 있습니다.
가장 빠른 방법은 실제로 document.ready입니다-페이지가로드되는 즉시 실행됩니다.
$( document ).ready(function() {
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
isFitWidth: true
});
});
또는 함수 내에서 석조 코드를 캡슐화하고 나중에 호출하도록 선택할 수 있습니다. 예 :
// Declare your function
function initMasonry() {
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
isFitWidth: true
});
}
함수를 호출하려면 다음과 같이 호출하십시오.
initMasonry();
최신 정보
석조에 대한 문서를 읽은 후 jQuery 선택기에서 석조 객체를 초기화하는 대신 새 석조 객체를 만들어야합니다.
예제 코드 :
$(document).ready(function() {
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
columnWidth: '.grid-sizer',
itemSelector: '.item',
isFitWidth: true
});
});
업데이트 된 바이올린 : http://jsfiddle.net/pjbq4gj6/
참조 용 문서 : http://masonry.desandro.com/#javascript
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다