Исправление ошибки в файле Shuffle.js

Question

Я использую shuffle.js для моего текущего проекта. он работает очень хорошо ... только это, у меня есть консольная ошибка с параметрами переопределения по умолчанию.

Моя проблема возникает именно на этапе columnThreshold. если я удалю эту строку кода, мой макет станет невосприимчивым и испорченным. но когда я вставляю строку columnThreshold: HAS_COMPUTED_STYLE ? 0.01 : 0.1,, мой макет становится отзывчивым, но я получаю консольную ошибку, и эффект speed: 250 опциона становится бесполезным ... в основном я не могу контролировать скорость воспроизведения в случайном порядке ...

ошибка консоли штаты Uncaught ReferenceError: HAS_COMPUTED_STYLE is not defined. в документации не содержится никакой информации о возможных вариантах для columnThreshold. все, что я хочу, это значение columnThreshold не влияет на значение speed или другое значение.

весь мой код выглядит следующим образом:

// Overrideable options 
 
Shuffle.options = { 
 
    group: ALL_ITEMS, // Initial filter group. 
 
    speed: 250, // Transition/animation speed (milliseconds). 
 
    easing: 'ease-out', // CSS easing function to use. 
 
    itemSelector: '', // e.g. '.picture-item'. 
 
    sizer: null, // Sizer element. 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: HAS_COMPUTED_STYLE ? 0.01 : 0.1, // 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). 
 
    sequentialFadeDelay: 150, // Delay between each item that fades in when adding items. 
 
    supported: CAN_TRANSITION_TRANSFORMS // Whether to use transforms or absolute positioning. 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="js/plugins/jquery-shuffle/jquery.shuffle.modernizr.min.js"></script> 
 
<script src="js/plugins/jquery-throttle-debounce/jquery-throttle-debounce.js"></script> 
 

 
<section class="row section-container"> 
 
     <div class="row"> 
 
      <div class="container top-padding-only"> 
 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 filter-options-list"> 
 
        <div class="filter-options"> 
 
         <h3 class="filter-options-title">Recent Projects</h3> 
 
         <button type="button" class="btn btn-default" data-group="all">all</button> 
 
         <button type="button" class="btn btn-default" data-group="photography">photography</button> 
 
         <button type="button" class="btn btn-default" data-group="design">design</button> 
 
         <button type="button" class="btn btn-default" data-group="web">engineering</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div id="grid" class="row"> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography"]'> 
 
       <a href="#" class=""><img src="img/1.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "design", "photography"]'> 
 
       <a href="#"><img src="img/2.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography"]'> 
 
       <a href="#"><img src="img/3.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "web", "design"]'> 
 
       <a href="#"><img src="img/4.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "design", "photography"]'> 
 
       <a href="#"><img src="img/5.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography"]'> 
 
       <a href="#"><img src="img/6.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "design", "web"]'> 
 
       <a href="#" class=""><img src="img/1.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <figure class="col-lg-3 col-md-3 col-sm-6 col-xs-12 portfolio-box" data-groups='["all", "photography", "web"]'> 
 
       <a href="#"><img src="img/2.jpg" class="responsive-img" alt=""> 
 
        <div class="four-portfolio-box-caption"> 
 
         <div class="four-portfolio-box-caption-content"> 
 
          <div class="four-portfolio-box-caption-content-header">Portfolio Caption Header</div> 
 
          <div class="four-portfolio-box-caption-content-description">This is a brief Description of this PortfolioThis is a brief Description of this PortfolioThis is a brief Description of this Portfolio</div> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </figure> 
 
      <!-- sizer --> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 shuffle_sizer"></div> 
 
     </div> 
 
    </section>

Answer 1

Насколько я знаю, HAS_COMPUTED_STYLE является переменной, что вы должны быть определены, и, похоже, должно быть логическое значение. Помня об этом, я не знаю точно, каков предполагаемый стиль, который у вас должен быть или нет для ваших предметов в случайном порядке, поэтому я бы поставил простой «истинный» или «ложный» на эту переменную, независимо от того, что вы хотите.

С другой стороны, если вы видите объект Shuffle options, я думаю, что вам не нужно это свойство. Это должно работать:

Shuffle.options = { 
    group: ALL_ITEMS, 
    speed: 250, 
    easing: 'ease-out', 
    itemSelector: '.portfolio-box', 
    sequentialFadeDelay: 150 
};