s-yadav / angulargrid

Pinterest like responsive masonry grid system for angular
MIT License
277 stars 105 forks source link

Scroll functionality is not working as expected #40

Open shashidharg opened 8 years ago

shashidharg commented 8 years ago

Hi Yadav,

I have about 20 images to load for each page. After I setup your module I noticed that even for a single scroll a AJAX call was being made. (At least for me, or my page setup). After looking around your code at https://github.com/s-yadav/angulargrid/blob/master/angulargrid.js#L289

I altered it to

compareHeight = Math.abs( (scrollHeight - contHeight * (1 + options.infiniteScrollDistance / 100)) );
if (scrollTop >= compareHeight) { ... }

The reason it was not working as expected for me is because compareHeight was always negative, so after I applied Math.abs() it worked as expected.

Not sure if this is a bug/issue. Just wanted to point it out.

Regards, Shashidhar.G

s-yadav commented 8 years ago

Check if you have defined container, it must have some fixed height.

shashidharg commented 8 years ago

This is my HTML code

<div id="page_result" ng-controller="photoResultController">
    <ul class="dynamic-grid" angular-grid="photos.items" ag-options="{gridWidth : 300, gutterSize: 10, infiniteScrollDistance:50}" ag-id="gallery" ag-scroll-container="page_result" ag-infinite-scroll="loadMore()">
        <li data-ng-repeat="item in photos.items" class="grid" data-ng-clock>
            <img src="{{item.web_path}}" class="grid-img" data-actual-width = "{{item.actualWidth}}"  data-actual-height="{{item.actualHeight}}" />
        </li>
    </ul>
    <div ng-show='photos.busy'>Loading images...</div>
</div>

This is the step by step calculation

(2089 - 2089 * (1 + 50 / 100)) (2089 - 2089 * 1.5) (2089 - 3155.5) -1044.5