Different height of rows bug

IgorBabkin commented 9 years ago

If height of rows not the same then appears emply space.

IgorBabkin commented 9 years ago

http://jsbin.com/xakuhi/edit?output

IgorBabkin commented 9 years ago

screencast

NeXTs commented 9 years ago

Привет

Да, потому что в идеале высота строк должна быть примерно одинаковой. Плагин-же как работает, берёт одну из строк, смотрит её высоту и умножает на кол-во строк. Так и вычисляется высота одного кластера. При незначительных колебаниях высоты такой эффект словить не получится. А у вас же - при инициализации мерки взялись с одной из высокой строки, а в кластере оказалось много маленьких - вот и несостыковки высоты кластера. Такие, к сожалению, ограничения этого плагина. Высчитывать высоту каждой строки слишком затранто, так что этот вариант я отмёл.

Попробуйте указать параметр blocks_in_cluster: 2, кластеры должны будут заменяться чаще и до пустого места может не дойти.

var clusterize = new Clusterize({   
  scrollId: 'scrollArea', 
  contentId: 'contentArea',  
  blocks_in_cluster: 2    
});

IgorBabkin commented 9 years ago

Ясно. Впринципе меня все устраивает. В моей задаче будет только одна строка другого размера нежели остальные. А в этом случае все норм работает. Клевый плагин) Спс.

IgorBabkin commented 9 years ago

Можешь объяснить что такое кластер? Не совсем понял

NeXTs commented 9 years ago

Кластер это список именно тех тегов которые в данный момент находятся в DOM'e. Но кластеры также включают в себя разделения на "виртуальные" блоки, выглядит это так:

Кластер:
    Блок:
        тег
        тег
        тег
    Блок:
        тег
        тег
        тег
    Блок: // ←
        тег
        тег
        тег

Отсюда и настройки: rows_in_block, blocks_in_cluster

Когда прокручиваешь список и скролл доходит до начала последнего блока, кластер заменяется на следующий. Так что свойство rows_in_block лучше всего держать больше чем кол-во тегов одновременно видимых на экране. Т.е. если на экране одновременно помещается, скажем, 20 строк, rows_in_block хорошо бы указать 25+

IgorBabkin commented 9 years ago

а зачем нужны блоки?

IgorBabkin commented 9 years ago

screencast

IgorBabkin commented 9 years ago

4.88% прыгают вверх. Я так понимаю в этот момент кластер обновляется?

NeXTs commented 9 years ago

Блоки на самом деле только для того чтоб определить момент когда нужно заменять на следующий кластер. А делается это при достижении скролла самого начала последнего блока, если скролить вниз. Теперь то я уже понимаю что можно было обойтись без этого, но когда начинал писать - так было легче думать. И так оно и осталось до сих пор..

Блоков как таковых в DOM'е нет, они только для вычислений используются.

IgorBabkin commented 9 years ago

это происходит при таких настройках

  rows_in_block: 25,
  blocks_in_cluster: 4

NeXTs commented 9 years ago

а вот прыгать не должно. сейчас посмотрю

IgorBabkin commented 9 years ago

У меня пара вопросов:

можно ли кастомный скроллбар каким то образом прикрутить, стилизованный?
что делать если нужно повесить обработчики событий (onclick например) на элементе списка?

NeXTs commented 9 years ago

Вообще можно. Я бы посоветовал baron т.к. он оставляет дефолтное браузерное поведение (по скорости) и только стилизирует скроллбар, такой скроллер думаю можно прикрутить легче всего. Но если очень хочется использовать стилизированный плагин который сам влияет на прокрутку, типа malihu custom scrollbar, то это уже нужно менять исходники clusterize, т.к. тот скроллер вообще не выдаёт события scroll а имеет свою реализацию скрола через отрицательный margin. Я уже отвечал на этот вопрос
Использовать делегирование событий, смотри faq (How to attach event listener to rows?)

NeXTs commented 9 years ago

Тебе border-spacing критично? Из-за него несостыковки между кластерами.

~~Используй~~

table{border-spacing: 0;}

Я вот думаю, добавить в плагин стили на обнуление этого свойства или определять его и учитывать в просчетах?

NeXTs commented 9 years ago

А, ладно. Добавил в плагин :) Обновляйся до 0.12.0

IgorBabkin commented 9 years ago

Спс большое!) Сейчас вроде все как надо работает.

IgorBabkin commented 9 years ago

Кстати если tr td заменить на div то вообще никаких проблем. Даже с кардинально разными высотами строк

IgorBabkin commented 9 years ago

http://output.jsbin.com/xakuhi/62 http://jsbin.com/xakuhi/62/edit?js,output

IgorBabkin commented 9 years ago

Хотя нет. Ладно думаю пора закрывать эту тему)

IgorBabkin commented 9 years ago

Слушай, а ты же впринципе наверно можешь понять что во вьюпорте уже clusterize-extra-row clusterize-bottom-space

И в этот момент наверно можно подтянуть новый кластер?

NeXTs commented 9 years ago

Могу, но зачем так делать? Чтоб избавится от блоков?

NeXTs / Clusterize.js

Different height of rows bug #41