Infinity Scroll & Responsive results.

Hi All,

Sorry for the long post...

I'm implementing Infinite Scroll (http://www.infinite-scroll.com/) on a site, that displays a "wall of images"; square product images that fill the browser window in a tile effect. The number of images could be heaps, so I need some form of pagination.

Infinite scroll can be configured to display X results per page, then when the page is scrolled to the bottom, the next X appear =rather than clicking through to the next page.

However, the site is also responsive, so on a mobile it displays a grid of 1 image across, landscape 2 images across, up to 10 images across on a wide screen.

I want to show a grid 10 by 8 on the wide screen, so 80 results per page, by only 1 by 8 on the mobile, so 8 results per page.

Can anyone advise me on how to change the "results per page" based on the screen width?

kind of like:
@media screen and (min-width: 960px) {
'perPage' => '80',}
}



@media only screen and (min-width: 768px) and (max-width: 959px) {
'perPage' => '48',}
}


@media only screen and (min-width: 480px) and (max-width: 767px) {
'perPage' => '24',}
}


@media only screen and (min-width: 320px) and (max-width: 479px) {
'perPage' => '16',}
}

@media screen and (min-width: 0px) and (max-width: 319px) {
'perPage' => '8',}
}

thanks!