I'm developing a small website which is responsive, and I'm planning on displaying a number of items ( Demo ) on the page. As you can see in the link the items are displayed just fine, but what I'm trying to do is calculate the exact number of items that would fit inside the window ( more specific the actual space between the footer and the header ) so none of them will be shown only by half or overflown by the footer.

I got this small function working :

Cluster.prototype.initiate_items_per_page_calculation = function() {
    return Math.floor(Math.floor(($(window).width() - ($(window).width() * 4 / 100)) / $('body').find(this.cluster_public_classes.item_wrapper).outerWidth()) * Math.floor(Math.floor($(window).height() - ($('body').find('header').outerHeight() + $('body').find('footer').outerHeight()) - ($(window).height() * 4 / 100)) / $('body').find(this.cluster_public_classes.item_wrapper).outerHeight()));

Just that the calculations are not that exact. For instance I have the item's width of 260px and it's height 160px ( adding a few pixels because there two more layers of background behind the visible layer that are rotated 3deg, so there are about 5 pixels more on each side ) plus the white space between them which is 15px on each side, and there are the footer and the header heights which cut from the space, so taking all of this into consideration my calculations are not that accurate anymore. So I was wondering if I could get a little bit of help with making this work perfectly no matter what the screen size is (:


1 Answer 1


The best and easiest way to do this would be to place the items in a box container with a pre-computed height and width. Then in order to find the max amount of items that can be placed in the container, you just divide the area of the box container by the area of an item.

I used this method with your previous function and got something like this.

Cluster.prototype.initiate_items_per_page_calculation = function () {
    var o = this.get_init_calculation_object(),
        areaOfHeaderAndFooter = ( o.header.w * o.header.h ) + ( o.footer.w * o.footer.h ),
        areaOfExtraPaddingToContainer = 150 * 250 * 2,
        areaOfBoxContainer = (o.screen.w * o.screen.h ) - areaOfHeaderAndFooter - areaOfExtraPaddingToContainer,
        areaOfBox = (o.item.w * o.item.h),
        containerBoxLimit = Math.floor( areaOfBoxContainer / areaOfBox );

    return containerBoxLimit;
Cluster.prototype.get_init_calculation_object = function () {
    var $body = $('body'), 
        $header = $body.find('header'),
        $footer = $body.find('footer'),
        $item = $body.find(this.cluster_public_classes.item_wrapper);

    return {
            h: $footer.outerHeight(true),
            w: $footer.outerWidth(true)
            h: $header.outerHeight(true),
            w: $header.outerWidth(true)
            h: $item.outerHeight(true),
            w: $item.outerWidth(true)
            h: $body.outerHeight(true),
            w: $body.outerWidth(true)
  • \$\begingroup\$ One question though, why use .outerHeight(true) ? \$\endgroup\$
    – Roland
    Sep 3, 2012 at 12:22
  • \$\begingroup\$ Shouldn't that be var o = this.get_init_calculation_object()? \$\endgroup\$ Sep 3, 2012 at 17:52
  • \$\begingroup\$ @JosephSilber You're right. Fixed. \$\endgroup\$ Sep 3, 2012 at 19:48
  • 1
    \$\begingroup\$ @Roland api.jquery.com/outerHeight Passing true to outerHeight() will include the margin in the returned height. This might be important since the margin contributes to the total area that an item takes up. \$\endgroup\$ Sep 3, 2012 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.