आइसोटोप

Question

में तत्वों को केंद्रित करने वाले सभी को नमस्कार और मुझे उम्मीद है कि आप अच्छा कर रहे हैं। मैं आइसोटोप का उपयोग कर रहा हूं और नीचे आप जो जावास्क्रिप्ट लिखा है उसे देख सकते हैं। मुझे li तत्वों को केंद्र करना असंभव लगता है यदि वे आइसोटोप तत्व हैं। देखने के लिए मेरा मतलब क्या है, कृपया नीचे दी गई छवियां देखें। मैंने पूरे आइसोटोप को स्क्रीन पर केंद्रित करने में कामयाब रहा है, लेकिन मुझे तत्वों को भी केंद्रित करने की आवश्यकता है और न केवल बाईं तरफ तैरने की जरूरत है।

के मेरी स्क्रिप्ट कोड के साथ शुरू करते हैं:

<script> 
$(document).ready(function(e) { 
    $(".ullist li").addClass('element-item'); 
}); 

</script> 
<script> 
$(document).ready(function(e) { 
// external js: isotope.pkgd.js 

// init Isotope 
var $grid = $('.grid').isotope({ 
    itemSelector: '.element-item', 
    //layoutMode: 'fitRows', 
}); 
//$('.grid').isotope({ layoutMode : 'fitRows' }); 
// filter functions 
var filterFns = { 
    // show if number is greater than 50 
    numberGreaterThan50: function() { 
    var number = $(this).find('.number').text(); 
    return parseInt(number, 10) > 50; 
    }, 
    // show if name ends with -ium 
    ium: function() { 
    var name = $(this).find('.name').text(); 
    return name.match(/ium$/); 
    } 
}; 

// bind filter button click 
$('#filters').on('click', 'a', function() { 
    var filterValue = $(this).attr('data-filter'); 
    // use filterFn if matches value 
    filterValue = filterFns[ filterValue ] || filterValue; 
    $grid.isotope({ filter: filterValue }); 
}); 

// change is-checked class on buttons 
$('.secmenu ul a').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'a', function() { 
    $buttonGroup.find('.is-checked').removeClass('is-checked'); 
    $(this).addClass('is-checked'); 
    }); 
});}); 
</script> 
<script> 
$(function(){ 

    var $container = $('.grid'), 
     $body = $('body'), 
     colW = 20, 
     columns = null; 

    $container.isotope({ 
    // disable window resizing 
    resizable: true, 
    masonry: { 
     columnWidth: colW, 
     isFitWidth: true 
    } 
    }); 

    $(window).smartresize(function(){ 
    // check if columns has changed 
    var currentColumns = Math.floor(($body.width() -10)/colW); 
    if (currentColumns !== columns) { 
     // set new column count 
     columns = currentColumns; 
     // apply width to container manually, then trigger relayout 
     $container.width(columns * colW) 
     .isotope('reLayout'); 
    } 

    }).smartresize(); // trigger resize to set container width 

}); 
</script> 

मूल HTML संरचना:

<ul class="ullist grid"> 
<li> ... </li> 
<li> ... </li> 
<li> ... </li> 
<li> ... </li> 
     </ul> 

आइसोटोप कोई मुद्दा नहीं (अभी तक) के साथ बहुत अच्छी तरह से काम करता है। यह मेरा वर्तमान लेआउट है:

और यह इच्छित लेआउट है।

मैंने यहां भी जांच की और डेविड डीसंड्रो की रिपोजिटरी का उपयोग करने की कोशिश की लेकिन बिना किसी सफलता के। तो कृपया ऊपर दिए गए लेआउट को प्राप्त करने के लिए कृपया आप मेरी मदद कर सकते हैं? सभी को अग्रिम धन्यवाद।

jQuery isotope centering

Answer 1

इस लिए सबसे अच्छा समाधान फ्लेक्स बॉक्स का उपयोग कर रहा है, तो आप (IE8 नीचे) पुराने ब्राउज़र के लिए समर्थन करने के लिए चिंतित नहीं। फ्लेक्स-बॉक्स समाधान codepen Link के लिए इस पेन को देखें।

ul { 
    width: 600px; 
    list-style: none; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
} 
li { 
    width: calc((100%/3) - 60px); 
    height: 200px; 
    background-color: #d91c5c; 
    margin: 30px; 
}` 

Answer 2

आपको कुछ अतिरिक्त मार्कअप जोड़ने और आइसोटोप फिट करने वाले आइटमों की संख्या बढ़ाने की आवश्यकता हो सकती है।

<ul class="ullist grid"> 
    <li><span class="box">...</span></li> 
    <li><span class="box">...</span></li> 
    <li><span class="box">...</span></li> 
    <li><span class="box">...</span></li> 
</ul> 

फिर आप कुछ करने के लिए स्तंभों की संख्या है कि दोनों 2 और 3 से विभाज्य है सेट करेंगे आप 6 बनाते हैं, तो आप पहले 6 li आइटम दो कॉलम, और अंतिम दो अवधि 3 अवधि हो सकता है :

फिर, उपयोग सीएसएस li आइटम के भीतर अपने .box तों स्थिति।

यदि आप नहीं जानते कि कितने 'आवारा' आइटम आप अंत में होगा यह मुश्किल हो जाता है - आप यह पता लगा, जोड़ने एक वर्ग जावास्क्रिप्ट का उपयोग करने के लिए आवश्यकता हो सकती है (जैसे कि .span-2, .span-3, .span-6