Como faço para que, por padrão, 6 elementos div sejam mostrados na página, e quando um usuário rola para a parte inferior da página, mais seis são carregados?

Se você ver issoexemplo, tem vários divs. Eu quero que apenas 6 deles sejam exibidos inicialmente, e cada vez que o usuário chegar ao final da página, eu quero que mais seis sejam carregados, até que você 'fique sem div'.

Até agora eu tentei experimentar com plugins de rolagem infinita do jQuery, mas eles não são aplicáveis ​​no meu caso, como na verdade o número de elementos que eu tenho é muito finito!

Como isso pode ser feito usando jQuery? Desde já, obrigado!

EDITAR

Acredito que um poderia definir o resto dos divs para oculto (para além dos primeiros 6), e acionar uma função que carrega mais seis quando a parte inferior da página é atingida.