이것은 콘솔에이 오류가 발생하는 이유는 무엇입니까? Shuffle homepage에있는 "usage"아래에 나오는 코드를 따라 가려고했지만이 페이지는 라이브러리를 시작하기위한 모든 단계를 포함하지 않을 것이라고 생각합니다.Shuffle.js를 사용하려고하는데 Uncaught를 얻으 려합니다. TypeError : Shuffle이 생성자가 아닙니다.
다음은 라이브러리를 설치할 때 생성 된 shufflejs 폴더 내에있는 색인 파일의 코드입니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Shuffle Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<body>
<div id="grid" class="row my-shuffle-container">
<figure class="[email protected] picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="/img/baseball.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Baseball</figcaption>
</figure>
<figure class="[email protected] picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="/img/tennis-ball.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Tennis</figcaption>
</figure>
<figure class="[email protected] picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="/img/imac.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>iMac</figcaption>
</figure>
<div class="[email protected] my-sizer-element"></div>
</div>
<script>
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var sizer = element.querySelector('.my-sizer-element');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: sizer // could also be a selector: '.my-sizer-element'
});
// Overrideable options
Shuffle.options = {
group: Shuffle.ALL_ITEMS, // Initial filter group.
speed: 250, // Transition/animation speed (milliseconds).
easing: 'ease', // CSS easing function to use.
itemSelector: '*', // e.g. '.picture-item'.
sizer: null, // Element or selector string. Use an element to determine the size of columns and gutters.
gutterWidth: 0, // A static number or function that tells the plugin how wide the gutters between columns are (in pixels).
columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
columnThreshold: 0.01, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
staggerAmount: 15, // Transition delay offset for each item in milliseconds.
staggerAmountMax: 250, // Maximum stagger delay in milliseconds.
useTransforms: true, // Whether to use transforms or absolute positioning.
};
</script>
</body>
</html>
코드에 ShuffleJS 파일을 포함시키지 않았습니다. – yuriy636
@ yuriy636 아, 그래, 그 오류를 제거 -하지만 지금은 별도의 잡힐 참조 오류의 루프에있는 것 같습니다. 심각한 질문 - Shuffle의 설명서에 실제 시작 안내서가없는 이유는 무엇입니까? 제가 본 많은 j 라이브러리는 Shuffle이 반대되는 동안 설정 방법에 매우 명쾌합니다. –