[jQuery] 모바일 상품 리스트 정렬 스크립트

제목 정하는 게 여전히 쉽지 않다. 모바일 환경에서 쇼핑몰 상품 리스트 정렬은 쉽지 않은 문제이다. 해상도가 제가각이고 가로 세로 회전이 가능하기 때문에 그에 따라 리스트 정렬이 변경되어야 하는데.. 이번에 그걸 하기 위해서 간단한 스크립트를 작성해 봤다. float: left; 속성을 가지는 li들을 나열시키는데 화면 사이즈에 맞춰서 적당히 패딩값을 부여해서 상품이 화면 가운데 보이도록 했다. padding-right 값 때문에 한 줄에 4개가 표시되어야할 것이 3개로 표시되는 것은 해당 라인의 마지막 엘리먼트 padding-right 값을 0으로 설정하는 것으로 해서 4개가 표시되도록 했다.

<script>
$(function() {
    set_list_margin();
});

$(window).resize(function() {
    set_list_margin();
});

function set_list_margin()
{
    var li_padding = 0;
    if($("li.sct_li:first").data("padding-right") == undefined) {
        li_padding = parseInt($("li.sct_li:first").css("padding-right"));
        $("li.sct_li:first").data("padding-right", li_padding);
    }
    else
        li_padding = $("li.sct_li:first").data("padding-right");

    $("li.sct_li").css("padding-left", 0).css("padding-right", li_padding);
    $("li.sct_clear").removeClass("sct_clear");

    var ul_width = parseInt($("ul.sct").width());
    var li_width = parseInt($("li.sct_li:first").outerWidth());
    var li_count = parseInt((ul_width + li_padding) / li_width);

    if(li_count == 0)
        return;

    var space = parseInt(ul_width % li_width);

    if((space + li_padding) < li_width) {
        var new_padding = parseInt((space + li_padding) / (li_count * 2));

        if(new_padding > li_padding)
            $("li.sct_li").css("padding-left", new_padding+"px").css("padding-right", new_padding);
    }

    $("li.sct_li:nth-child("+li_count+"n)").css("padding-right", 0);
    $("li.sct_li:nth-child("+li_count+"n+1)").addClass("sct_clear");
}
</script>

패드와 여러 안드로이드폰에서 테스트를 해봤는데 정상적으로 표시가 되는 것 같았다. 그러나 아직 테스트해보지 못한 기기가 더 많기 때문에 완벽하다고는 할 수 없다.
15:01분 추가.. 위 스크립트를 jQuery 플러그인화 해봤다.

(function($) {
    $.fn.itemList = function(element, clear)
    {
        var cfg = {
                element: "li.sct_li",
                clear: "sct_clear"
            };

        if(typeof element == "object")
            cfg = $.extend( cfg, element );
        else {
            if(element)
                cfg = $.extend( cfg, { element: element } );
            if(clear)
                cfg = $.extend( cfg, { clear: clear } );
        }

        var $element = this.find(cfg.element);
        var $this = this;

        function item_arrange()
        {
            var $el = $element.filter(":first");
            var padding = 0;
            if($el.data("padding-right") == undefined) {
                padding = parseInt($el.css("padding-right"));
                $el.data("padding-right", padding);
            }
            else
                padding = $el.data("padding-right");

            $element.css("padding-left", 0).css("padding-right", padding);
            $element.filter("."+cfg.clear).removeClass(cfg.clear);

            var wrap_width = parseInt($this.width());
            var item_width = parseInt($el.outerWidth());
            var line_count = parseInt((wrap_width + padding) / item_width);

            if(line_count == 0)
                return;

            var space = parseInt(wrap_width % item_width);

            if((space + padding) < item_width) {
                space = wrap_width - ((item_width - padding) * line_count);
                var new_padding = parseInt(space / (line_count * 2));

                if(new_padding > padding)
                    $element.css("padding-left", new_padding+"px").css("padding-right", new_padding);
            }

            $element.filter(":nth-child("+line_count+"n)").css("padding-right", 0);
            $element.filter(":nth-child("+line_count+"n+1)").addClass(cfg.clear);
        }

        item_arrange();

        $(window).resize(function() {
            item_arrange();
        });
    }
}(jQuery));

사용법은 $(“ul.wrap”).itemLIst(); 이렇게 하면 된다.