Разные значения высоты в .outerHeight()

245
21 июля 2018, 15:10

Написал скрипт для постройки блоков в виде кирпичной кладки. Но когда не указываю явную высоту блока, то скрипт неверно считает высоту и соответственно неверно располагает блоки.

Пробовал отслеживать код, и оказалось, что всё идёт не туда в этой строке:

$(this).outerHeight(true); // Сохранял высоту каждого блока

В массив записывается одно значение (неверное), но если вставить эту строку в консоль браузера и протестировать там, то выводиться верная высота.

В общем, если даже вставить этот скрипт в консоль браузера, то всё становиться так как хотелось бы, но при загрузке страницы, увы, так не происходит. На англоязычном SO нашёл подобный вопрос, но не совсем понятен ответ...

Как исправить сохранение правильной высоты?

$(document).ready(function() { 
 
  let cols = 3;                // Количество колонок 
  let grid = $('[data-grid]'); // Получаем грид 
 
  grid.css({ 
    position: 'relative' 
  }); 
 
  let items = [];       // Массив с высотой блоков 
  let top = 0,          // Инициир. значения 
    left = -100 / cols; // Позиция слева и сверху 
 
  // 
  // Главный цикл 
  grid.children().each(function(i) { 
 
    items.push($(this).outerHeight(true));          // Сохраняем текущую высоту блока 
 
    i % cols === 0 ? left = 0 : left += 100 / cols; // Считаем позицию слева 
 
    // Считаем позицию с топа 
    if (items[i - cols] === undefined) { 
      top = 0; 
    } else { 
      let itemNumber = i; 
      top = 0; 
      while (itemNumber >= cols) { 
        top += items[itemNumber - cols]; 
        itemNumber -= cols; 
      } 
    } 
 
    // Обновляем свойства блока 
    $(this).css({ 
      position: 'absolute', 
      width: 100 / cols + '%', 
      top: top, 
      left: left + '%' 
    }); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
 
<div class="container"> 
  <div data-grid> 
    <div> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium enim, error esse est et harum illo in necessitatibus placeat quam quasi quod repellendus tempore totam unde, velit! Illo, voluptates. Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ab dolorum facere facilis laboriosam nemo omnis ratione rem. Aliquam beatae dolore excepturi expedita fugiat, laudantium modi mollitia odio quisquam, reprehenderit temporibus. 
    </div> 
    <div> 
      Animi atque aut, beatae cupiditate quis saepe velit. Cumque non nulla perspiciatis ut vero! Ad amet asperiores blanditiis eaque harum mollitia quam quas, quod ratione temporibus. Beatae earum facilis magnam? 
    </div> 
    <div> 
      Deserunt earum error expedita odit suscipit vel velit? Ipsa nesciunt, nihil obcaecati perspiciatis possimus quod sapiente suscipit. Eaque enim, natus. Assumenda aut consectetur dicta exercitationem molestiae nulla officiis quibusdam vero! Lorem ipsum 
      dolor sit amet, consectetur adipisicing elit. Ex hic sequi vitae. Aliquam amet, beatae doloremque ducimus esse explicabo fugit harum impedit nobis, non quam quisquam, quos rerum ut velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Accusamus alias architecto aspernatur, corporis debitis dolore ea in magni minus nisi provident rem reprehenderit sapiente, sed soluta, tempore velit voluptate voluptatem! 
    </div> 
    <div> 
      Ad alias aperiam aut beatae corporis maiores nulla odit perferendis perspiciatis reiciendis repellendus, ur dicta dolores eaque eveniet illo modi nihil perspiciatis quidem repellat sequi similique tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing 
      elit. A ab aliquid autem blanditiis consectetur distinctio fuga illo molestias necessitatibus nihil quae quasi quis, quisquam reprehenderit, sed sequi tempora veniam voluptatum. 
    </div> 
    <div> 
      A asperiores aut corporis cumque eligendi expedita placeat saepe veniam! Dolore dolores dolorum odit quisquam ut? Beatae consequuntur fuga id illo molestiae mollitia officia quae quos. Explicabo impedit nemo nostrum? Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Enim, neque nihil omnis quibusdam reprehenderit sapiente. A consequuntur deleniti dicta eveniet ipsum maiores quis ullam ut vitae! Fugiat itaque perferendis ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus 
      culpa eum ex harum impedit inventore libero perferendis porro reprehenderit veniam. Ad commodi deserunt ex facilis ipsum iusto maxime, nisi quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores aut ipsam ipsum magni molestias 
      reprehenderit. Accusantium asperiores dolorem doloribus eum hic in, laboriosam nobis non nostrum optio, quo, ratione. 
    </div> 
  </div> 
</div>

Answer 1

Нужно сначала задавать ширину блока, потом измерять высоту:

$(document).ready(function() { 
 
  let cols = 3;                // Количество колонок 
  let grid = $('[data-grid]'); // Получаем грид 
 
  grid.css({ 
    position: 'relative' 
  }); 
 
  let items = [];       // Массив с высотой блоков 
  let top = 0,          // Инициир. значения 
    left = -100 / cols; // Позиция слева и сверху 
 
  // 
  // Главный цикл 
  grid.children().each(function(i) { 
    $(this).css({ width: 100 / cols + '%' }); 
    items.push($(this).outerHeight(true));          // Сохраняем текущую высоту блока 
 
    i % cols === 0 ? left = 0 : left += 100 / cols; // Считаем позицию слева 
 
    // Считаем позицию с топа 
    if (items[i - cols] === undefined) { 
      top = 0; 
    } else { 
      let itemNumber = i; 
      top = 0; 
      while (itemNumber >= cols) { 
        top += items[itemNumber - cols]; 
        itemNumber -= cols; 
      } 
    } 
 
    // Обновляем свойства блока 
    $(this).css({ 
      position: 'absolute', 
      top: top, 
      left: left + '%' 
    }); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
 
<div class="container"> 
  <div data-grid> 
    <div> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium enim, error esse est et harum illo in necessitatibus placeat quam quasi quod repellendus tempore totam unde, velit! Illo, voluptates. Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ab dolorum facere facilis laboriosam nemo omnis ratione rem. Aliquam beatae dolore excepturi expedita fugiat, laudantium modi mollitia odio quisquam, reprehenderit temporibus. 
    </div> 
    <div> 
      Animi atque aut, beatae cupiditate quis saepe velit. Cumque non nulla perspiciatis ut vero! Ad amet asperiores blanditiis eaque harum mollitia quam quas, quod ratione temporibus. Beatae earum facilis magnam? 
    </div> 
    <div> 
      Deserunt earum error expedita odit suscipit vel velit? Ipsa nesciunt, nihil obcaecati perspiciatis possimus quod sapiente suscipit. Eaque enim, natus. Assumenda aut consectetur dicta exercitationem molestiae nulla officiis quibusdam vero! Lorem ipsum 
      dolor sit amet, consectetur adipisicing elit. Ex hic sequi vitae. Aliquam amet, beatae doloremque ducimus esse explicabo fugit harum impedit nobis, non quam quisquam, quos rerum ut velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Accusamus alias architecto aspernatur, corporis debitis dolore ea in magni minus nisi provident rem reprehenderit sapiente, sed soluta, tempore velit voluptate voluptatem! 
    </div> 
    <div> 
      Ad alias aperiam aut beatae corporis maiores nulla odit perferendis perspiciatis reiciendis repellendus, ur dicta dolores eaque eveniet illo modi nihil perspiciatis quidem repellat sequi similique tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing 
      elit. A ab aliquid autem blanditiis consectetur distinctio fuga illo molestias necessitatibus nihil quae quasi quis, quisquam reprehenderit, sed sequi tempora veniam voluptatum. 
    </div> 
    <div> 
      A asperiores aut corporis cumque eligendi expedita placeat saepe veniam! Dolore dolores dolorum odit quisquam ut? Beatae consequuntur fuga id illo molestiae mollitia officia quae quos. Explicabo impedit nemo nostrum? Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Enim, neque nihil omnis quibusdam reprehenderit sapiente. A consequuntur deleniti dicta eveniet ipsum maiores quis ullam ut vitae! Fugiat itaque perferendis ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus 
      culpa eum ex harum impedit inventore libero perferendis porro reprehenderit veniam. Ad commodi deserunt ex facilis ipsum iusto maxime, nisi quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores aut ipsam ipsum magni molestias 
      reprehenderit. Accusantium asperiores dolorem doloribus eum hic in, laboriosam nobis non nostrum optio, quo, ratione. 
    </div> 
  </div> 
</div>

READ ALSO
поиск по неполному названию записи

поиск по неполному названию записи

Запись имеет название titlePhoto, которое хранится в качестве массива строк [String]Пытаюсь выполнить поиск по неполному названию

239