0

ページの幅に応じて、ページに多数のサムネイル画像をロードできるようにしたいと考えています。読み込まれる画像の数は、ページの幅によって異なります。

画像 (100 x 100) は、横に並んで画面の幅全体を占めるように読み込まれます。

これを達成するための最良の方法は何ですか？

前もって感謝します

これは私がこれまでに思いついたものです： - 

<script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>

<style type="text/css">

    #dv_frame {
        width: 100%;
        /*border: 1px solid #cccccc;*/
        text-align: center;
        height: 110px;
        position: relative;

    }

    #dv_images {
        /*border: solid 1px blue;*/
        height: 100px;

        margin: auto;

    }

    .myImage{
        width: 100px;
        height: 100px;
        border: solid 1px red;
        float: left;
        margin-right: 5px;
        margin-left: 5px;
    }



</style>


<script type="text/javascript">

    $(document).ready(function () {

        var container = $("#dv_frame")
        var tWidth = 0
        var width = container.width()

        for (c = 0; c < 100; c++) {
            tWidth = tWidth + 110
            if (tWidth > (width - 10)) {
                $("#dv_images").css("width", (tWidth - 80))
                break;
            }
            addSquare()
        }

        function addSquare() {
            $("#dv_images").append("<div class='myImage'></div>")
        }

    });

</script>

   </head>

 <body>
<div id="dv_frame"><div id="dv_images"></div></div>
</body>
</html>
4

1 に答える 1

0

画像を追加して毎回幅を確認する代わりに、最初から必要な画像の数を計算するだけです。それらをDOMにないダミーのdivに追加し、最後にそれをコンテナに追加します（速度と効率のために）。

var $container = $("#dv_frame"),
    imageWidth = 110, // including margin & padding
    imagesNeeded = Math.floor($container.width() / imageWidth), // rounded down, width/imageWidth
    i, // iterator
    $foo = $('<div></div>'); // empty container div

for(i = 0; i < imagesNeeded; i++) {
    // appending to our empty container div
    $foo.append("<div class='myImage'></div>");
}

// then appending the contents of our container div to the DOM.
// this is quicker and more efficient than doing lots of appends to the DOM in a loop.
$("#dv_images").append($foo.contents());

例: http://jsfiddle.net/lukemartin/d8WNy/

于 2013-07-11T14:45:17.260 に答える