I setup the configurable products using 4 options (color, size thickness, size width, size ball).
I want view color distinct 
items on the list.
When I click each items, the detail page will be same. (same color swatch and options views)
(please check my attached file.)
When I click a item has got blue color option, I want see the blue color selected on the product view page.
Please let me know the solution.
Thank you.
Interesting challenge you have there - the products are ideally suited for Magento, you should end up with a store vastly more convenient than the competitors where you cannot filter by gauge, colour etc.
As for the problem, don't put colour in the configurable product options, just the size options will do. For selecting colours the way you want, move the related product block to the main product page options area.
Your 'related products' will need thumbnails and some careful creation so they stay in the same sort order. To do this:
Presumably you are using SKU's that follow some pattern, e.g. SKU-SIZE1-SIZE2-COLOUR. Put together a module with an observer that runs on some sensible schedule, e.g. overnight. In that scheduled task get the product collection grouped by SKU and ordered by COLOUR. Put some sort order to your colours, e.g. spectrum, with Red = 100, Orange = 200 and everything sensible in between. The im of the task is to go through all the products, find 'related' products (same model code, sku). Then in that group create related product links. For the example above, with six colour variants you will need to put in 25 links (5^2) once you take all six configurable master products into consideration.
Now you will need some work on the template. Initially you may want to get anything to show, you will also need to put the currently selected product in the list in the correct place so that the colour thumbnails do not jump around when you go from one colour variant to the next.
This can be done by using an extension called Pre-Select Colors Plus Swatches. You can find a demo of said extension here: http://preselectswatches.cjmcreativedesigns.com/products.html
There are 6 products shown in the demo. One is the configurable product and the other five are the simple products showing the various color options. Notice that each of the color options loads the parent product with the color option already selected. The configurable product can even be hidden from the category listings, if needed, so that you only show the color options on the category pages.
