2013-03-26 10 views
12

मैं अपनी वर्तमान वेब साइट के साथ अनंत स्क्रॉल को शामिल करने की कोशिश कर रहा हूं जो कि jQuery चिनाई के प्रकार का उपयोग कर रहा है। मैं जावास्क्रिप्ट (और सामान्य रूप से एचटीएमएल) की भाषा और बुनियादी कार्य को समझने की कोशिश कर रहा हूं, लेकिन यह काफी भारी हो सकता है। मैं php के उपयोग सहित वेब पेज पर अनंत स्क्रॉल जोड़ने के लिए विभिन्न विधियों को भी देख रहा हूं। असल में, मुझे दिशा की कोई समझ नहीं है कि मेरी वेबसाइट के लिए सबसे अच्छी विधि कौन सा है। किसी भी सुझाव या मदद की बहुत सराहना की है। और मैं इस विषय के बारे में ज्ञान की कमी के लिए क्षमा चाहता हूं, लेकिन मुझे लगता है कि यह मेरे सिर पर काफी है ... @ _ @मैं jQuery चिनाई के साथ अनंत स्क्रॉल कैसे जोड़ूं?

यहां मेरी वेबसाइट है। यह मेरा व्यक्तिगत कलाकृति संग्रह है: http://themptyrm.com

उत्तर

5

अनंत स्क्रॉल, मैं अपने प्रोजेक्ट में एक बार कोशिश की है इसलिए यहाँ संदर्भ मैं अब तक का इस्तेमाल किया था में से कुछ हैं ..

https://github.com/paulirish/infinite-scroll

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

जेएसक्रॉल फिलिप क्लाउज़िंस्की द्वारा लिखित अनंत स्क्रॉलिंग के लिए एक jQuery प्लगइन है। अनंत स्क्रॉल; आलसी लोडिंग, अंतहीन स्क्रॉलिंग, ऑटोपेजर, अंतहीन पृष्ठों, आदि के रूप में भी जाना जाता है; जब आप नीचे स्क्रॉल करते हैं तो वर्तमान पृष्ठ या सामग्री क्षेत्र में AJAX के माध्यम से सामग्री लोड करने की क्षमता है। जब भी आप मौजूदा सामग्री के अंत तक स्क्रॉल करते हैं, तो नई सामग्री को स्वचालित रूप से लोड किया जा सकता है, या मौजूदा सामग्री के अंत में एक नेविगेशन लिंक पर क्लिक करके इसे लोड करने के लिए ट्रिगर किया जा सकता है।

http://jscroll.com/

आशा है कि यह मदद करता है।

+0

आप इसका भी उपयोग कर सकते हैं ... http://www.infinite-scroll.com/inf inite-scroll-jquery-plugin/ –

22

अपने html फ़ाइल

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="../jquery.masonry.min.js"></script> 
<script src="../js/jquery.infinitescroll.min.js"></script> 

में इस जोड़ सकते हैं और इस ऐड, यहाँ आप अनंत स्क्रॉल विकल्पों

<script type="text/javascript"> 
var $container = $('#container'); 
$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
    var $newElems = $(newElements); 
    $container.masonry('appended', $newElems); 
    } 
); 
</script> 

माध्यम से अपने पृष्ठ लग रहा है निर्दिष्ट कर सकते हैं महान

अगर आप अधिक है संदेह यहां जाएं Masonry with Infinite scroll

+1

मैं उम्र के लिए इसका समाधान ढूंढ रहा हूं। चयनकर्ताओं को बदलने के बाद यह स्निपेट सचमुच काम करता था। – egr103

संबंधित मुद्दे