html 具有分类器的响应列

Posted 2021-05-11

/**
 * @function
 * @name getWidth
 * 
 */
function getWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}
/**
 * @function
 * @name adaptative_columns
 * @see https://github.com/adamwulf/Columnizer-jQuery-Plugin
 */
function adaptative_columns (screenWidth) {
    if (screenWidth > '940') { // breckpoint Desktop
        console.log("Mode Desktop : "+screenWidth);
        $('.column > *').unwrap();
        $('.js-columnize').columnize({
            columns:2,
            buildOnce:false,
            lastNeverTallest:true
        });
    }
    if ((screenWidth < '939') && (screenWidth > '640') ) { // breckpoint tablet
        console.log("Mode tablette : "+screenWidth);
        $('.column > *').unwrap();
        $('.js-columnize').columnize({
            columns:2,
            buildOnce:false,
            lastNeverTallest:true});
    }
    if (screenWidth<'639') { // Breakpoint Phone
        console.log("Mode Phones : "+screenWidth);
        $('.column > *').unwrap();
        $('.js-columnize').columnize({
            columns:1,
            buildOnce:false,
            lastNeverTallest:true});
    } 
}

// Dom Ready
(function($){
    $(document).ready(function(){
        // Columnize
        // https://github.com/adamwulf/Columnizer-jQuery-Plugin
        
        var screenWidth = getWidth();
        //
        adaptative_columns(screenWidth);
        //
        $(window).resize(function(){
           var screenWidth = getWidth();
           adaptative_columns(screenWidth);
        });
    });
});

<article class="list-thema js-fixie">
    <h2></h2>
    <ul class="js-columnize">
        <li><a href=""><i class="icon-chevron-right"></i></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
    <a href="" class="btn-primary"></a>
</article>